JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<ul class="custom">
    <li>
        <span>My product 1:</span>
        <input type="number" name="amount" data-id="34442" value="3">
     </li>
     <li>
         <span>My product 2:</span>
         <input type="number" name="amount" data-id="2332" value="2">
     </li>
     <li>
         <span>My product 3:</span>
         <input type="number" name="amount" data-id="12123" value="0">
     </li>
</ul>
<button class="checkout">Checkout</button>

JavaScript

$( '.checkout' ).on( 'click', function () {
  $( 'li input[name=amount]' ).each( function () {
    var id = $( this ).data( 'id' );
    var amount = $( this ).val();
    // Shopify.cart.add({ id: id, amount: amount });
  });
  // Shopify.cart.checkout();
});