Javascript only working on reload and not on initial load

Question

Issue: My script only works once the page is reloaded.

I do have turbo links and tried to use:

$(document).on('turbolinks:load', function(){

var client_token_ = "<%= @client_token_ %>";
var form = document.querySelector('#payment_form-4-a');
var nonceInput = document.querySelector('#nonce-a');

  braintree.dropin.create({
    authorization: client_token_,
    container: '#dropin-container-2',
    paypal: {
      flow: 'checkout',
      amount: "<%= @listing.listing_video.price %>",
      currency: 'USD'
    },
    venmo: {
      allowNewBrowserTab: false
    }
  }, function (err, dropinInstance) {
    if (err) {
      // Handle any errors that might've occurred when creating Drop-in
      console.error(err);
      return;
    }
    form.addEventListener('submit', function (event) {
      event.preventDefault();

      dropinInstance.requestPaymentMethod(function (err, payload) {
        if (err) {
          // Handle errors in requesting payment method
          return;
        }

        // Send payload.nonce to your server
        nonceInput.value = payload.nonce;
        form.submit();
      });
    });
  });
})

instead of $(document).on('turbolinks:load', function(){ I also tried:

$( document ).ready(function() {

document.addEventListener("turbolinks:load", function() {

I also tried using a function with an onclick, which works, but the issue with is it that the page has 2 forms and the one script will "load" but will somehow combine with the other and load in the other form.

Here's the full 2 javascript scripts in the header: This is the way i got both of the scripts to work on the page together but the one without the onclick function is the script that needs the reload, and it's also the one last on the page. Once reloaded, everything works perfectly.

<script >
    function BraintreeFunction_4() {
    var client_token = "<%= @client_token %>";
    var form = document.querySelector('#payment_form-4');
    var button = document.querySelector('#submit-button');
    var nonceInput = document.querySelector('#nonce');

      braintree.dropin.create({
        authorization: client_token,
        container: '#dropin-container',
        paypal: {
          flow: 'checkout',
          amount: "<%= @listing.listing_video.price %>",
          currency: 'USD'
        },
        venmo: {
          allowNewBrowserTab: false
        }
      }, function (err, dropinInstance) {
        if (err) {
          // Handle any errors that might've occurred when creating Drop-in
          console.error(err);
          return;
        }
        form.addEventListener('submit', function (event) {
          event.preventDefault();

          dropinInstance.requestPaymentMethod(function (err, payload) {
            if (err) {
              // Handle errors in requesting payment method
              return;
            }

            // Send payload.nonce to your server
            nonceInput.value = payload.nonce;
            form.submit();
          });
        });
      });
    }
  </script>
  <script >
    var client_token_ = "<%= @client_token_ %>";
    var form = document.querySelector('#payment_form-4-a');
    var button = document.querySelector('#submit-button');
    var nonceInput = document.querySelector('#nonce-a');

      braintree.dropin.create({
        authorization: client_token_,
        container: '#dropin-container-2',
        paypal: {
          flow: 'checkout',
          amount: "<%= @listing.listing_video.price %>",
          currency: 'USD'
        },
        venmo: {
          allowNewBrowserTab: false
        }
      }, function (err, dropinInstance) {
        if (err) {
          // Handle any errors that might've occurred when creating Drop-in
          console.error(err);
          return;
        }
        form.addEventListener('submit', function (event) {
          event.preventDefault();

          dropinInstance.requestPaymentMethod(function (err, payload) {
            if (err) {
              // Handle errors in requesting payment method
              return;
            }

            // Send payload.nonce to your server
            nonceInput.value = payload.nonce;
            form.submit();
          });
        });
      });
  </script>

Whether in the header or body, the results are the same.

I got both of the scripts to work on the page together but the one without the onclick function is the script that needs the reload, and it's also the one last on the page. Once reloaded, everything works perfectly

Any way to have it so the one without the function loads up on the pages initial load? I am usually able to fix this issue with turbolinks:load as i treid above but it won't solve it on this one