JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" id="form">
        <div class="cart-row">
        	<p>Product name</p>
        	<label for="updates">Quantity:</label>
            <input type="number" name="updates[]" value="2" min="0" data-unit-price="18.00" class="cart-variant--quantity_input"><br />
            &pound;18 each
        </div>
        
        <div class="cart-row">
        	<p>Product name</p>
        	<label for="updates">Quantity:</label>
        	<input type="number" name="updates[]" value="4" min="0" data-unit-price="31.00" class="cart-variant--quantity_input"><br />
            &pound;31 each
        </div>
        
        <div class="cart-row">
        	<p>Product name</p>
        	<label for="updates">Quantity:</label>
        	<input type="number" name="updates[]" value="4" min="0" data-unit-price="12.00" class="cart-variant--quantity_input"><br />
            &pound;12 each
        </div>
        <input type="submit" value="submit" />
    </form>

CSS

/* Some styling so the world isn't so ugly */
form { font-family:arial; }
div { background-color:#efefef; padding:10px; margin:0 0 15px 0; }
p { margin:0; padding:0 0 5px 0; font-size:1.4em; text-transform:uppercase; }
input { border:1px solid #ccc; margin:5px 0; padding:3px; }
label { font-weight:bold; display:block; padding:0; margin:0; }
input[type="submit"] {
    color:#fff;
    background-color:#000;
    border:none;
    margin:15px 0 0 0;
    padding:5px;
    text-transform:uppercase;
}

JavaScript

// Update final price on quantity change
    $('.cart-variant--quantity_input').on("change", function() {
      var st			= 0;
      $('.cart-row').each(function(e) {
        var i			= $('.cart-variant--quantity_input').eq(e);
        var up		 	= $(i).data('unit-price');
        var q	 		= $(i).val();
        st			= st + (up * q);
      });
      // Subtotal price
      alert('Cart updated. Subtotal : ' + st + 'GBP');
    });