JSFiddle - React, Tailwind, and code Playground

HTML

<div id="invoice_table">
    <table>
    <tbody><tr><th>Item</th><th>Description</th><th>Quantity</th><th>Rate</th><th>Amount</th><th>VAT</th><th>Sub-Total</th></tr>
    
        <tr>
        <td><input type="text" class="0" value="" name="item0"></td>
        <td><input type="text" class="inv_desc_input" value="" name="description0"></td>
        <td><input type="text" value="0" name="quantity0"></td>
        <td><input type="text" value="0.00" name="rate0"></td>
        <td><input type="text" class="amount" value="0.00" name="amount0"></td>
        <td><input type="text" class="vat" value="0.00" name="vat0"></td>
        <td><input type="text" class="subtotal" value="0.00" name="sub_total0"></td>
        </tr>
        <tr>
        <td><input type="text" class="1" value="" name="item1"></td>
        <td><input type="text" class="inv_desc_input" value="" name="description1"></td>
        <td><input type="text" value="0" name="quantity1"></td>
        <td><input type="text" value="0.00" name="rate1"></td>
        <td><input type="text" class="amount" value="0.00" name="amount1"></td>
        <td><input type="text" class="vat" value="0.00" name="vat1"></td>
        <td><input type="text" class="subtotal" value="0.00" name="sub_total1"></td>
        </tr>
        <tr>
        <td><input type="text" class="2" value="" name="item2"></td>
        <td><input type="text" class="inv_desc_input" value="" name="description2"></td>
        <td><input type="text" value="0" name="quantity2"></td>
        <td><input type="text" value="0.00" name="rate2"></td>
        <td><input type="text" class="amount" value="0.00" name="amount2"></td>
        <td><input type="text" class="vat" value="0.00" name="vat2"></td>
        <td><input type="text" class="subtotal" value="0.00" name="sub_total2"></td>
        </tr>
        <tr>
        <td><input type="text" class="3" value="" name="item3"></td>
        <td><input type="text" class="inv_desc_input" value="" name="description3"></td>
  ...

JavaScript

$("#invoice_table").live({ // invoice calculations
        keyup: function() {
            var qty = '0.0';
            var rate = '0.0';
            var amount = '0.0';
            var amttotal = '0.0';
            var vat = '0.0';
            var vattotal = '0.0';
            var subtotal = '0.0';
            var total = '0.0';

            amount = amount * 1; // force js to handle the var as a number
            qty = qty * 1;
            rate = rate * 1;
            vat = vat * 1;
            subtotal = subtotal * 1;
            total = total * 1;

            var rows = $("#invoice_table tr:gt(0)"); // skip the header row
            
            rows.each(function(index) {
                rows.children("td").each(function() { // calculate amount, vat, subtotal for row
                    qty = $("td:nth-child(3) input").val();
                    rate = $("td:nth-child(4) input").val();
                    amount = qty * rate;
                    vat = amount / 100 * 20;
                    subtotal = amount;
                    subtotal += vat;
    
                    vat = vat.toFixed(2); // limit to two decimal places
                    amount = amount.toFixed(2);
                    subtotal = subtotal.toFixed(2);
    
                    $("td:nth-child(5) input").val(amount); // output the values
                    $("td:nth-child(6) input").val(vat);
                    $("td:nth-child(7) input").val(subtotal);
                });
            });

            rows.find("td:nth-child(5) input").each(function() { // calculate vat column
                amttotal += $("td:nth-child(5) input").val();
            });

            rows.find("td:nth-child(6) input").each(function() { // calculate amount column
                vattotal += $("td:nth-child(6) input").val();
            });

            rows.find("td:nth-child(7) input").each(function() { // calculate subtotal column
                total += $("td:nth-child(7) input").val();
           ...