how to get the value of each row and calculate for subtotal

Question

Fiddle I have done the calculation for multiple rows when user input the quantity, unit price and tax. but now I want to get each of the row amount and tax amount to calculate for subtotal, tax, totalamount, how can I do? Any suggestion? Do I need to use $.each(function) to get the each row data in oredr to calculate them?

Example Result that I want.

Qty| UnitPrice | Tax | Tax Amount | Amount
1  | 10.00     | 2   |   0.2      | 10.00
1  | 20.00     | 3   |   0.6      | 20.00
                     |   Subtotal | 30.00
                     |   Tax      |  0.80
                     | TotalAmount| 30.80

my coding part

<table>
  <thead>
    <tr>
      <th>Action</th>
      <th>Description</th>
      <th>Qty</th>
      <th>Unit Price</th>
      <th>Tax</th>
      <th>Tax Amount</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody class="items_table">
    <tr class="item-row">
      <td><button id="delete" href="javascript:;" onclick="deleteRow(this)" title="Remove row">Delete</button></td>
      <td><input class="form-control row-desc" id="desc" rows="1"></td>
      <td><input class="form-control tx-right row-qty" type="text" id="qty" value="0"></td>
      <td><input class="form-control tx-right row-unitprice" type="text" id="unitprice" value="0"></td>
      <td>
        <input class="form-control tx-right row-tax" type="text" id="tax"></td>
      <td>
        <input class="form-control tx-right row-taxamount" type="text" id="amounttax" disabled></td>
      <td><input class="form-control tx-right row-amount" type="text" id="amount" disabled></td>
    </tr>
  </tbody>
  <tfoot>
    <tr id="hiderow">
      <td colspan="7" class="tx-center tx-15"><b><a id="addrow" href="javascript:;" title="Add a row"></i>Add an Item</a></b></td>
    </tr>
    <tr>
      <td class="valign-middle" colspan="5" rowspan="7">
        <!-- invoice-notes -->
      </td>
      <td>Sub-Total</td>
      <td class="colspan-2">
        <input class="form-control" type="text" placeholder="RM 0.00" id="subtotal"></td>
    </tr>
    <tr>
      <td class="tx-right">Tax</td>
      <td class="tx-right" colspan="2">
        <input class="form-control" type="text" placeholder="RM 0.00" id="tax"></td>
    </tr>
    <tr>
      <td>Total Amount</td>
      <td colspan="2">
          <input class="form-control input-sm tx-right" type="text" value="0" id="total">
      </td>
    </tr>
  </tfoot>
</table>
<br><br>



   $(document).ready(function() {
      AddItem();
      $('#addrow').click(function() {
        addItem();
      });
      $('.delete-row').click(function() {
        deleteRow(btn);
      });
             
    });

    function deleteRow(btn) {
      var row = btn.parentNode.parentNode;
      var next = row.parentNode.rows[row.rowIndex + 0];
      row.parentNode.removeChild(next);
      row.parentNode.removeChild(row);
    }


    $(document).on('keyup', '.row-unitprice, .row-qty, .row-tax', function (e) {

        var $row = $(this).closest("tr"); //this is the closest common root of the input elements
        var qty = parseFloat($row.find('input.row-qty').val());
        var unitprice = parseFloat($row.find('input.row-unitprice').val());
        var tax = parseFloat($row.find('input.row-tax').val());
 
        Itemamount = (qty * unitprice) || 0; 
        Taxamount = (Itemamount * tax / 100) || 0; 

        $row.find('input.row-amount').val(Itemamount.toFixed(2));  
        $row.find('input.row-taxamount').val(Taxamount.toFixed(2));
     
    });

Answer 1

You can use .each loop to iterate through your trs and get tax and total values add it in some variable using += and then finally show result inside required inputs

Demo Code :

$(document).on('keyup', '.row-unitprice, .row-qty, .row-tax', function(e) {

  var $row = $(this).closest("tr"); //this is the closest common root of the input elements
  var qty = parseFloat($row.find('input.row-qty').val());
  var unitprice = parseFloat($row.find('input.row-unitprice').val());
  var tax = parseFloat($row.find('input.row-tax').val());

  Itemamount = (qty * unitprice) || 0;
  Taxamount = (Itemamount * tax / 100) || 0;
  SubTotal =

    $row.find('input.row-amount').val(Itemamount.toFixed(2));
  $row.find('input.row-taxamount').val(Taxamount.toFixed(2));
  var total = 0,
    tax_total = 0,
    grand_total = 0;
  //loop thrugh trs
  $(".item-row").each(function() {
    //add total & tax
    total += $(this).find(".row-amount").val() != "" ? parseFloat($(this).find(".row-amount").val()) : 0
    tax_total += $(this).find(".row-taxamount").val() != "" ? parseFloat($(this).find(".row-taxamount").val()) : 0
  })
  grand_total = parseFloat(total + tax_total);
  //add result to inputs
  $("#subtotal").val(total.toFixed(2))
  $(".tax").val(tax_total.toFixed(2))
  $("#total").val(grand_total.toFixed(2))

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Action</th>
      <th>Description</th>
      <th>Qty</th>
      <th>Unit Price</th>
      <th>Tax</th>
      <th>Tax Amount</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody class="items_table">
    <tr class="item-row">
      <td><button id="delete" href="javascript:;" onclick="deleteRow(this)" title="Remove row">Delete</button></td>
      <td><input class="form-control row-desc" id="desc" rows="1"></td>
      <td><input class="form-control tx-right row-qty" type="text" id="qty" value="0"></td>
      <td><input class="form-control tx-right row-unitprice" type="text" id="unitprice" value="0"></td>
      <td>
        <input class="form-control tx-right row-tax" type="text" id="tax"></td>
      <td>
        <input class="form-control tx-right row-taxamount" type="text" id="amounttax" disabled></td>
      <td><input class="form-control tx-right row-amount" type="text" id="amount" disabled></td>
    </tr>
    <tr class="item-row">
      <td><button id="delete" href="javascript:;" onclick="deleteRow(this)" title="Remove row">Delete</button></td>
      <td><input class="form-control row-desc" rows="1"></td>
      <td><input class="form-control tx-right row-qty" type="text" value="0"></td>
      <td><input class="form-control tx-right row-unitprice" type="text" value="0"></td>
      <td>
        <input class="form-control tx-right row-tax" type="text"></td>
      <td>
        <input class="form-control tx-right row-taxamount" type="text" disabled></td>
      <td><input class="form-control tx-right row-amount" type="text" disabled></td>
    </tr>
  </tbody>
  <tfoot>
    <tr id="hiderow">
      <td colspan="7" class="tx-center tx-15"><b><a id="addrow" href="javascript:;" title="Add a row"><a>Add an Item</a></b></td>
    </tr>
    <tr>
      <td class="valign-middle" colspan="5" rowspan="7">
        <!-- invoice-notes -->
      </td>
      <td>Sub-Total</td>
      <td class="colspan-2">
        <input class="form-control" type="text" placeholder="RM 0.00" id="subtotal"></td>
    </tr>
    <tr>
      <td class="tx-right">Tax</td>
      <td class="tx-right" colspan="2">
        <input class="form-control tax" type="text" placeholder="RM 0.00"></td>
    </tr>
    <tr>
      <td>Total Amount</td>
      <td colspan="2">
        <input class="form-control input-sm tx-right" type="text" value="0" id="total">
      </td>
    </tr>
  </tfoot>
</table>
<br><br>