JSFiddle - React, Tailwind, and code Playground

by RoryMcCrossan

HTML

<form>
    <div>
        Quantity:
        <input type="text" class="qty" />Unit price:
        <input type="text" class="unit" />Amount:
        <input type='text' class="amount" />
    </div>
    <div>
        Quantity:
        <input type="text" class="qty" />Unit price:
        <input type="text" class="unit" />Amount:
        <input type='text' class="amount" />
    </div>
    
    Total All:
    <input type="text" class="result" />
</form>

JavaScript

$('.unit, .qty').on('change', function () {
    var $container = $(this).closest('div');
    var unit = $container.find('.unit').val() || 0;
    var qty = $container.find('.qty').val() || 0;
    var val = parseFloat(unit * qty);
    var total = 0
    
    $container.find('.amount').val(val.toFixed(2));
    $('.amount').each(function () {
        total += parseFloat($(this).val() || 0);
    });    
    $('.result').val(total.toFixed(2));
});