Total cost not update correctly according to math function in jQuery

Question

I am trying to do basic math with jQuery as well as adding extra row of the table dynamically. The code I have currently is as follows:

$(document).ready(
  function() {

    $(".sub").focusout( //get it using class
      function() {
        var parent = $(this).closest('.row_to_clone');
        parent.find(".net").html('');
        var gross = parent.find('.gross').val();
        var tare = parent.find('.tare').val();
        var net = (gross - tare);
        net = Math.round(net * 1000) / 1000;
        parent.find(".net").html(net);
      });

    $(".sub1").focusout(function() {
      $(".total").html('');
      var net = parseFloat($(".net").text());
      var ppp = parseFloat($(".ppp").val());
      var total = net * ppp;
      $(".total").html(Math.round(total * 1000) / 1000);
    });


    $("#add").click(
      function() {
        var newRow = $('#lineItemTable tbody>tr:last')
          .clone(true).insertAfter(
            '#lineItemTable tbody>tr:last');
        newRow.find('input').val('');
        newRow.find('p').text('');
        return false;
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="add">add Line</a>
<table id="lineItemTable">
  <tr>
    <th>Gross</th>
    <th>Tare</th>
    <th>Net</th>
    <th>Price Per Pound</th>
    <th>Total cost</th>
  </tr>
  <tr class="row_to_clone">
    <td>
      <input type='number' step="any" name='gross' class='gross sub' />
    </td>
    <td>
      <input type='number' step="any" name='tare' class='tare sub' />
    </td>
    <td>
      <p class='net'></p>
    </td>
    <td>
      <input type="number" step="any" name="ppp" class='ppp sub1' />
    </td>
    <td id="calculated">
      <p class='total'></p>
    </td>
  </tr>
</table>

This capture shows the problem I am currently having:

As you can see, the total cost was not calculated correctly when I am adding more than one row. The total cost is calculated as follows: Net = (Gross - Tare) and Total Cost = Net * price per pound

It returns the correct result only when I am having one row of data. What am I missing?

Answer 1

You need to use selectors relative to the current row. You do it correctly in the .sub code, but not .sub1.

$(document).ready(
  function() {

    $(".sub").focusout( //get it using class
      function() {
        var parent = $(this).closest('.row_to_clone');
        parent.find(".net").html('');
        var gross = parent.find('.gross').val();
        var tare = parent.find('.tare').val();
        var net = (gross - tare);
        net = Math.round(net * 1000) / 1000;
        parent.find(".net").html(net);
      });

    $(".sub1").focusout(function() {
      var parent = $(this).closest('.row_to_clone');
      parent.find(".total").html('');
      var net = parseFloat(parent.find(".net").text());
      var ppp = parseFloat(parent.find(".ppp").val());
      var total = net * ppp;
      parent.find(".total").html(Math.round(total * 1000) / 1000);
    });


    $("#add").click(
      function() {
        var newRow = $('#lineItemTable tbody>tr:last')
          .clone(true).insertAfter(
            '#lineItemTable tbody>tr:last');
        newRow.find('input').val('');
        newRow.find('p').text('');
        return false;
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="add">add Line</a>
<table id="lineItemTable">
  <tr>
    <th>Gross</th>
    <th>Tare</th>
    <th>Net</th>
    <th>Price Per Pound</th>
    <th>Total cost</th>
  </tr>
  <tr class="row_to_clone">
    <td>
      <input type='number' step="any" name='gross' class='gross sub' />
    </td>
    <td>
      <input type='number' step="any" name='tare' class='tare sub' />
    </td>
    <td>
      <p class='net'></p>
    </td>
    <td>
      <input type="number" step="any" name="ppp" class='ppp sub1' />
    </td>
    <td id="calculated">
      <p class='total'></p>
    </td>
  </tr>
</table>

Answer 2

Get it with parent on .sub1 focusout too..

DEMO

$(".sub1").focusout(function() {
          var parent=$(this).closest('.row_to_clone');
          parent.find(".total").html('');
          var net = parseFloat(parent.find(".net").text());
          var ppp = parseFloat(parent.find(".ppp").val());
          var total = net * ppp;
          parent.find(".total").html(Math.round(total * 1000) / 1000);
});