Javascript SDK more than one button is showing.

[Ade_35]

I've created a Javascript SDK PayPal button to use on a checkout page. The amount value can be different every time.

The code seems to load fine on an HTML page with no other code:

<script src="https://www.paypal.com/sdk/js?client-id=XXXXXXXXXXXXX&components=buttons"></script>
<script>
    paypal.Buttons({
    style: {
        layout: 'vertical',
        color:  'gold',
        shape:  'rect',
        label:  'checkout'
  }
}).render('#paypal-button-container');
</script>
<script>
    paypal.Buttons({
      createOrder: function(data, actions) {
        // Set up the transaction
        return actions.order.create({
          purchase_units: [{
            amount: {
              value: '1000.00'
            }
          }]
        });
      }
    }).render('#paypal-button-container');
  </script> 
  <div id = "paypal-button-container"></div>
  

I get the following when I load the HTML page:

All I want is one version of the 2 buttons, not 4.