Rendering Multiple PayPal Payment Buttons on a Page - paypal

Question

I'm using PayPal JS SDK payment buttons where all you do is copy the code into your HTML site and the PayPal buttons appear to initiate a checkout.
This works for only one button on the page, but I have 3 subscriptions a user can choose from (daily, weekly, monthly)
If I copy the code into my daily div area it works correctly, but then if I copy the code into the weekly div it wont appear and only the daily div PayPal button appears. But if I remove the code from the daily div the button will appear under the weekly div.
It seems I can only use button code once?
I tried modifying the code by changing the id name and function names but still no luck.
Is there a way to have multiple PayPal on my page?
Here is the generated code from PayPal:
<div id="smart-button-container">
<div style="text-align: center;">
<div id="paypal-button-container"></div>
</div>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=test&currency=AUD" data-sdk-integration-source="button-factory"></script>
<script>
function initPayPalButton() {
paypal.Buttons({
style: {
shape: 'rect',
color: 'gold',
layout: 'vertical',
label: 'paypal',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{"description":"daily","amount":{"currency_code":"AUD","value":1}}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
},
onError: function(err) {
console.log(err);
}
}).render('#paypal-button-container');
}
initPayPalButton();
</script>
<br><br><br>
<p> gefwdsa</p>
<div id="smart-button-container">
<div style="text-align: center;">
<div id="paypal-button-container"></div>
</div>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=sb&currency=AUD" data-sdk-integration-source="button-factory"></script>
<script>
function initPayPalButton() {
paypal.Buttons({
style: {
shape: 'rect',
color: 'gold',
layout: 'vertical',
label: 'paypal',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{"description":"weekly sub","amount":{"currency_code":"AUD","value":5}}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
},
onError: function(err) {
console.log(err);
}
}).render('#paypal-button-container');
}
initPayPalButton();
</script>
This only makes the first button appear

Answer 1

The SDK script,
<script src="https://www.paypal.com/sdk/js?client-id=sb&currency=AUD" data-sdk-integration-source="button-factory"></script>
Should only be loaded exactly once per page, above all the buttons.
Additionally, each button must render to a div with a unique HTML id, so this line:
<div id="paypal-button-container"></div>
And this line:
}).render('#paypal-button-container');
Both need some corresponding different/additional string suffix for each button, e.g. paypal-button-container-1 , -2 for the next buttons' etc.
Also client-id of test or sb is sandbox mode, you need a live client-id from the 'Live' section of an app in https://www.paypal.com/signin?intent=developer&returnUri=https%3A%2F%2Fdeveloper.paypal.com%2Fdeveloper%2Fapplications