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 () {
        var i = $('.cart-variant--quantity_input', this);
        var up = $(i).data('unit-price');
        var q = $(i).val();
        st = st + (up * q);
    });
    // Subtotal price
    alert('Cart updated. Subtotal : ' + st + 'GBP');
});