JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form">
    <div class="row">
        <p>Item 1 - Price per carton: <span class="price">27</span></p>
        <input type="text" name="quant" class="quant"></input>
    </div>
    <div class="row">
        <p>Item 1 - Price per carton: <span class="price">222</span></p>
        <input type="text" name="quant" class="quant"></input>
        
    </div>
    <input type="text" disabled id="total" name="tot"></input>
</form>

JavaScript

$('.quant').on('keyup', function () {

    var sum = 0;
    $("#form div.row").each(function (i, o) {

        total = parseInt($(o).find(".quant").val(), 10) * parseInt($(o).find(".price").text(), 10);

        if (!isNaN(total) && total.length != 0) {
            sum += total;
        }
    });

    $("#total").val(sum);

});