Handling multiple jquery forms on one page

I am trying to process multiple forms using jquery. I can handle multiple buttons, but I cannot figure out how to handle multiple forms. Below is the logic for different buttons and I need to edit it for forms. Html

<form id="myForm" action="/charge" method="post">
    <input type="button" id="buySocks" value="Buy Socks for $10">
    <input type="button" id="buyShirts" value="Buy Shirts for $30">
    <input type="button" id="buyPants" value="Buy Pants for $50">
    <input type="hidden" id="stripeToken" name="stripeToken" />
    <input type="hidden" id="stripeEmail" name="stripeEmail" />
</form>

      

        
        
        
      

    

JQuery:

var handler = StripeCheckout.configure({
    key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
    token: function(token) {
            // append your token id and email, submit your form
          $("#stripeToken").val(token.id);
        $("#stripeEmail").val(token.email);
        $("#myForm").submit();
    }
  });

  $('#buySocks').on('click', function(e) {
        $("#product").val("socks");
        openCheckout("Buy socks for $10", 1000);
    e.preventDefault();
  });
  $('#buyShirts').on('click', function(e) {
    $("#product").val("shirts");
    openCheckout("Buy shirts for $30", 3000);
    e.preventDefault();
  });
  $('#buyPants').on('click', function(e) {
    $("#product").val("pants");
    openCheckout("Buy pants for $50", 5000);
    e.preventDefault();
  });

  function openCheckout(description, amount)
  {
    handler.open({
      name: 'Demo Site',
      description: description,
      amount: amount
    });
  }
  // Close Checkout on page navigation
  $(window).on('popstate', function() {
    handler.close();
  });

      

        
        
        
      

    

I need to achieve in order to be able to handle:

<form id='form1' action='/url1' method='post'>
<input id='button1' type='submit' value='enroll'>
</form>

<form id='form2' action='/url2' method='post'>
<input id='button2' type='submit' value='enroll'>
</form>

      

        
        
        
      

    

Each form must receive a stripeToken as the form must communicate with stripe.com. Each form has a different plan type, price, and description. Both forms are on the same page. Please advise.

EDIT:

Custom Stripe button for separate form below.

<form id="myForm" action="/charge" method="POST">
    <input type="hidden" id="stripeToken" name="stripeToken" />
    <input type="hidden" id="stripeEmail" name="stripeEmail" />
    <button id="customButton">Purchase</button>

</body>
<script type="text/javascript">
var handler = StripeCheckout.configure({
    key: '{{ key }}',
    image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
    locale: 'auto',
    token: function (token) {
        // Use the token to create the charge with a server-side script.
        // You can access the token ID with `token.id`
        $("#stripeToken").val(token.id);
        $("#stripeEmail").val(token.email);
        $("#myForm").submit();
    }
});

$('#customButton').on('click', function (e) {
    // Open Checkout with further options
    handler.open({
        name: 'Stripe.com',
        description: '2 widgets',
        amount: 500
    });
    e.preventDefault();
});

// Close Checkout on page navigation
$(window).on('popstate', function () {
    handler.close();
});
</script>