Integrate Paypal with my site

I am trying to integrate a paypal button with my website. I calculate the value to pay in a function called in one div section, then I passed  that value to another div section where I have my paypal button. I can see the total value to pay rendered in my page, but the paypal button function do not see the variable that was set previously in the other div.

<script type="text/javascript">
    function calc() {
      ...
       document.querySelector('#smart-button-container #amount').value = total;
      }
    </script>
    <div id="calculatePrice"></div>
    Choose your menu:
    <form oninput="calc();">
      ...
      <label for="total">Total price will be:</label><br>
      <output class="enMoney" id="total" name="total"></output><br><br>
    </form>
  
<div id="smart-button-container">
    <div style="text-align: center"><label for="description">Your order is: </label><output type="text" name="description" id="description" maxlength="127" value=""></div>
    <div style="text-align: center"><label for="amount">Total: </label><output name="amount" type="number" id="amount" value="" ><span> EUR</span></div>
    <div style="text-align: center; margin-top: 0.625rem;" id="paypal-button-container"></div>
  </div>
  <script src="https://www.paypal.com/sdk/js?client-id=AT6Q7KMR8NWjax3f-g11uL-iCAFgBTccSt1CTnXG-VnSGVmqj5-ozsSzVAaXij5zJuIwyMuEKOQQx01n&enable-funding=venmo&currency=EUR" data-sdk-integration-source="button-factory"></script>
  <script>
  function initPayPalButton() {
    var amount = document.querySelector('#smart-button-container #amount');
    # this variable is not set with the value of the amount that was set above
    ...

I found the solution,  I need to call the initPayPalButton()function after the user has calculated the amount value by calling the calc() function. I do this by adding an onsubmit attribute to the form element that calls the calc() function and then returns false to prevent the form from submitting.

<script type="text/javascript">
    function calc() {
      ...
       document.querySelector('#smart-button-container #amount').value = total;
      }
    </script>
    <div id="calculatePrice"></div>
    Choose your menu:
    <form onsubmit="calc();return false;" oninput="calc();">
      ...
      <label for="total">Total price will be:</label><br>
      <output class="enMoney" id="total" name="total"></output><br><br>
    </form>
  
<div id="smart-button-container">
    <div style="text-align: center"><label for="description">Your order is: </label><output type="text" name="description" id="description" maxlength="127" value=""></div>
    <div style="text-align: center"><label for="amount">Total: </label><output name="amount" type="number" id="amount" value="" ><span> EUR</span></div>
    <div style="text-align: center; margin-top: 0.625rem;" id="paypal-button-container"></div>
  </div>
  <script src="https://www.paypal.com/sdk/js?client-id=sb&enable-funding=venmo&currency=EUR" data-sdk-integration-source="button-factory"></script>
  <script>
  function initPayPalButton() {

   paypal.Buttons({
      style: {
        color: 'gold',
        shape: 'rect',
        label: 'paypal',
        layout: 'vertical',
        
      }, 
    createOrder: function (data, actions) {
        return actions.order.create({
          purchase_units: [{
              amount: {
                currency_code: 'EUR',
                value: document.querySelector('#total').value
              }
            }]
        });
      },

...