JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<input type="text" name="quantity[]" class="est_quantity" placeholder="quantity"/>
<input type="text" name="quantity[]" class="est_quantity" placeholder="quantity"/>
<input type="text" name="quantity[]" class="est_quantity" placeholder="quantity"/>

<input type="text" name="cost[]" class="est_cost" placeholder="cost"/>
<input type="text" name="cost[]" class="est_cost" placeholder="cost"/>
<input type="text" name="cost[]" class="est_cost" placeholder="cost"/>
<input type="text" name="total_cost" class="est_total_cost" />

JavaScript

$('.est_cost').live('keyup', function(){
    var val = 0.00;
    $('.est_cost').each(function() {
        var cost = parseFloat($(this).val()) * parseFloat($('.est_quantity:nth-child('+($(this).index() - 3)+')').val());
        val += parseFloat(cost);
        console.log(cost, val);
        $('.est_total_cost').html(val.toFixed(2));
    });
});