How to calculate summation same id of two products

Question

This question is an exact duplicate of:

• How to do summation of product of two input values from a clone table input values 1 answer

How to do each summation of class three of the products.

Here is my similar work.

How to do summation of product of two input values from a clone table input values

$("table").on("change", "input", function() { //use event delegation
  var tableRow = $(this).closest("tr"); //from input find row
  var one = Number(tableRow.find(".one").val()); //get first textbox
  var two = Number(tableRow.find(".two").val()); //get second textbox
  var total = one * two; //calculate total
  tableRow.find(".three").val(total); //set value
});

$("button.add").on("click", function() {
  var tbody = $("table tbody");
  tbody.find("tr:eq(0)").clone().appendTo(tbody).find("input").val("");
});

function updateTotalOfSubTotal() {
  var totalPoints = 0;
  var tableRow = $(this).closest("tr");
  var test = tableRow.find(".three").val();
  totalPoints += test;
  console.log(totalPoints);
}

updateTotalOfSubTotal();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td><input class="one" /></td>
      <td><input class="two" /></td>
      <td><input class="three" readonly="readonly" /></td>
    </tr>
  </tbody>
</table>

<button class="add">Add</button>

Answer 1

This works - note the keyup and the loop over .subTotal every time, not just first time

I have cleaned the code and use the HTML from your other question

function totalIt() {
  var total = 0;
  $(".subtotal").each(function() {
    var val = this.value;
    total += val == "" || isNaN(val) ? 0 : parseInt(val);
  });
  $("#total").val(total);
}
$(function() {
  var $to_clone = $('.tr_clone').first().clone();

  $("table").on('click', 'input.tr_clone_add', function() {
    var $tr = $(this).closest('.tr_clone');
    var $clone = $to_clone.clone();
    $clone.find(':text').val('');
    $tr.after($clone);
  });
  $("table").on('click', 'input.tr_clone_remove', function() {
    var $tr = $(this).closest('.tr_clone');
    if ($tr.index() > 1) $tr.remove(); // leave the first
    totalIt();
  });

  $(document).on("keyup", ".quantity, .price", function() {
    var $row = $(this).closest("tr"),
      prce = parseInt($row.find('.price').val()),
      qnty = parseInt($row.find('.quantity').val()),
      subTotal = prce * qnty;
    $row.find('.subtotal').val(isNaN(subTotal) ? 0 : subTotal);
    totalIt()
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="0">
  <thead>
    <tr>
      <th>Item</th>
      <th>Quantity</th>
      <th>U$ Price</th>
      <th>Subtotal</th>
      <th>Add</th>
      <th>Remove</th>
    </tr>
    <tr class="tr_clone">
      <td>
        <select style="width:200px" name="itens[]">
        <option value="0"></option>
        <option value="1">Item A</option>
        <option value="2">Item B</option>
        <option value="3">Item C</option>
    </td>                                            
    <td><input type="text" size="5" maxlength="5" name="qtd" class="quantity text ui-widget-content ui-corner-all"></td>
    <td><input type="text" size="10" maxlength="10" name="price" class="price text ui-widget-content ui-corner-all"></td>
    <td><input type="text" size="10" maxlength="10" name="subtotal" class="subtotal text ui-widget-content ui-corner-all"></td>
    <td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
    <td><input type="button" name="remove" value="Remove" class="tr_clone_remove"></td>
</tr>
</table>
<input type="text" readonly id="total" />