Dynamic row calculation with Jquery

Question

I want to make sum of dynamic rows and addition.

<div class="row">
    <div class="col-md-8">
       <div class="table-responsive">
          <table id="test-table" class="table table-bordered">
             <thead>
                <tr>
                   <th>Product</th>
                   <th>Price </th>
                   <th><input id='add-row' class='btn btn-primary' type='button' value='Add' /> </th>
                </tr>
             </thead>
             <tbody id="test-body">
                <tr id="row0" class="products">
                   <td>
                      <select name="product_id[]" id="" class="form-control">
                         <option value="">-- Select Product --</option>
                         @foreach ($product as $row )
                         <option value="{{ $row->id }}">{{ $row->product_name }}</option>
                         @endforeach
                      </select>
                   </td>
                   <td>
                      <input name="price[]" type="number" min="1" class="form-control input-md price" />
                   </td>
                   <td>
                      <input class="delete-row btn btn-primary" type="button" value="Delete" />
                   </td>
                </tr>
             </tbody>
          </table>
       </div>
    </div>
    <div class="col-md-4">
       <div class="col-xs-6">
          <p>Previous Due</p>
       </div>
       <div class="col-xs-6">
          <input type="text" class="form-control" value="5000" readonly>
       </div>
       <div class="col-xs-6">
          <p>Total Price</p>
       </div>
       <div class="col-xs-6">
          <input type="text" class="form-control total_price" value="" readonly>
       </div>
       <div class="col-xs-6">
          <p>Pay Now</p>
       </div>
       <div class="col-xs-6">
          <input type="number" class="form-control">
       </div>
       <div class="col-xs-6">
          <p>Total Due</p>
       </div>
       <div class="col-xs-6">
          <input type="number" value="" class="form-control">
       </div>
    </div>
 </div>

Script:

<script type="text/javascript">
  var row=1;
  $(document).on("click", "#add-row", function () {
  var new_row = '<tr id="row' + row + '" class="products"><td> <select name="product_id[]' + row + '" id="" class="form-control"> <option value="">-- Select Product --</option> @foreach ($product as $row ) <option value="{{ $row->id }}">{{ $row->product_name }}</option>@endforeach  </select></td><td><input name="price[]' + row + '" type="number" min="1" class="form-control price" /></td><td><input class="delete-row btn btn-primary" type="button" value="Delete" /></td></tr>';

  $('#test-body').append(new_row);
  row++;
  return false;
  });

  $(document).on("click", ".delete-row", function () {

    if(row>0) {
      $(this).closest('tr').remove();
      row--;
    }
  return false;
  });
</script>

<script type="text/javascript">
  function sumIt() {
  var total = 0, val;
  $('.price').each(function() {
    val = $(this).val();
    val = isNaN(val) || $.trim(val) === "" ? 0 : parseFloat(val);
    total += val;
  });
  $('.total_price').val(Math.round(total));

}
$(function() {
$(document).on('input', '.price', sumIt);
sumIt()
});

</script>

If I delete product row, the total price field is not updating the calculation. Suppose I added 4 rows, and give price value, after that I remove two rows, but the total price holds the previous 4 rows sum, it didn't update when I remove any row.

Here I want to show the total sum of product in total price. And the Total Due calculation will be total due = (previous due + total price)- pay now

thanks