JSFiddle - React, Tailwind, and code Playground

by sammry

HTML

<table id="items">
    <tr class="targetfields"> 
        <td><input type="text" name="quantity" class="quantity" /></td>
        <td><input type="text" name="rate" class="rate" size="5" /></td>
        <td><input type="text" name="sub_total" class="subtotal" /></td> 
    </tr> 
    <tr class="targetfields"> 
        <td><input type="text" name="quantity" class="quantity" /></td>
        <td><input type="text" name="rate" class="rate" size="5" /></td>
        <td><input type="text" name="sub_total" class="subtotal" /></td> 
    </tr> 
        <tr class="targetfields"> 
        <td><input type="text" name="quantity" class="quantity" /></td>
        <td><input type="text" name="rate" class="rate" size="5" /></td>
        <td><input type="text" name="sub_total" class="subtotal" /></td> 
    </tr> 
                <tr class="targetfields"> 
        <td colspan="2">Sub Total</td>
                    <td><span id="total"></span></td> 
    </tr> 
        <tr class="targetfields"> 
        <td colspan="2">Shippuing</td>
        <td><input type="text" name="shipping" class="shipping" /></td> 
    </tr> 
            <tr class="targetfields"> 
        <td colspan="2">Discount</td>
        <td><input type="text" name="discount" class="discount" /></td> 
    </tr> 
        </tr> 
            <tr class="targetfields"> 
        <td colspan="1">Tax</td>
                <td><input type="text" name="tax" class="tax">%</td>        
        <td><input type="text" name="taxamount" class="taxamount" /></td> 
    </tr> 
    </tr> 
            <tr class="targetfields"> 
        <td colspan="2">Grand Total</td>
        <td><input type="text" name="grandtotal" class="grandtotal" /></td> 
    </tr> 
</table>

JavaScript

jQuery(function() {

    jQuery("#items").keyup(function(event) {
     var total = 0;
     jQuery("#items .targetfields").each(function() {
         var qty = parseInt(jQuery(this).find(".quantity").val())||0;
         var rate = parseInt(jQuery(this).find(".rate").val())||0;
         var subtotal = qty * rate;
         jQuery(this).find(".subtotal").val(subtotal.toFixed(2));
         if(!isNaN(subtotal))
             total+=subtotal;
     });
     jQuery("#total").html(total.toFixed(2));
    });

})