如何将动态文本字段sub_total值自动求和为总文本字段

Question

I want to get the sum of the values of sub_total textfield in total textfield The rows can be added according to the user requirement... but .. I tried most of things.. but not getting right how to get the sum of all sub_total textbox values in the total text field without any user input could somebody help me with this code.....

thanks in advance..

i = 1;
$('.newRow').on('click', '.addRow', function(e) {
      $('.nR').append('<tr>' +
        '<td class="custom-td">' +
        '<select id="sp_' + i + '"  class="s_p select_product form-control input-sm" name="product[]" style="width:25em;" onchange="get_Result(' + i + ')">' +
        '<option></option>' +
        '@foreach ($products as $key=>$product_name)' +
        '<option value="{{$key}}">{{$product_name}}</option>' +
        '@endforeach' +
        '</select>' +
        '</td>' +
        '<td class="custom-td">' +
        '<input type="text" min="0" id="qty_' + i + '" class="qty form-control input-sm" name="quantity[]" autocomplete="off" value="1" onKeyUp="get_Result(' + i + ')">' +
        '</td>' +
        '<td class="custom-td">' +
        '<input type="text" id="up_' + i + '" class="up unit-price form-control input-sm" name="unit_price[]" readonly>' +
        '</td>' +
        '<td class="custom-td">' +
        '<input type="text" min="0" id="dis_' + i + '" class="form-control input-sm" name="discount[]" autocomplete="off" value="0" onKeyUp="get_Result(' + i + ')">' +
        '</td>' +
        '<td class="custom-td">' +
        '<input type="text" id="sub-total_' + i + '" class="s-t st form-control input-sm" name="sub_total[]" readonly>' +
        '</td>' +
        '<td style="text-align:center;">' +
        '<i data-toggle="tooltip" data-placement="top" title="delete" style="cursor:pointer;" class="tt red far fa-times-octagon remove"></i>' +
        '</td>' +
        '</tr>');
      i++;

      var total = 0
      $('.s-t').each(function() {
        var $this = $(this);
        total += $this.val();
      });
      $("#total").val(total);

<table class="item_table newRow table table-bordered table-sm mt-3" style="width:100%;">
  <tr style="font-size:12px;">
    <th>Product</th>
    <th>Quantity</th>
    <th>Unit Price (PKR)</th>
    <th>Discount</th>
    <th>Sub-Total</th>
    <th>Option</th>
  </tr>
  <tbody class="nR">
    <tr>
      <td class="custom-td">
        <select class="select_product s_p form-control input-sm" name="product[]" style="width:25em;">
          <option></option>
          @foreach ($products as $key=>$product_name)
          <option value="{{$key}}">{{$product_name}}</option>
          @endforeach
        </select>
      </td>
      <td class="custom-td">
        <input type="text" min="0" id="qty_0" class="qty form-control input-sm" name="quantity[]" autocomplete="off" value="1" onKeyUp="get_Result(0)">
      </td>
      <td class="custom-td">
        <input type="text" id="up_0" class="up unit-price form-control input-sm" name="unit_price[]" readonly>
      </td>
      <td class="custom-td">
        <input type="text" min="0" id="dis_0" class="form-control input-sm" name="discount[]" autocomplete="off" value="0" onkeyUp="get_Result(0)">
      </td>
      <td class="custom-td">
        <input type="text" id="sub-total_0" class="s-t st form-control input-sm" name="sub_total[]" readonly>
      </td>
      <td style="text-align:center;">
        <i data-toggle="tooltip" data-placement="top" title="delete" style="cursor:pointer;" class="red far fa-times-octagon remove"></i>
      </td>
    </tr>
  </tbody>
  <tr>
    <td colspan="6" style="padding-left:5px;">
      <button type="button" class="btn btn-default btn-sm addRow"><i class="fal fa-plus"></i> Add</button>
    </td>
  </tr>
</table>

<input type="text" id="total" style="border:none;background:#f7f7f7;text-align:right;font-weight:500;" class="form-control input-sm" name="total" readonly>

</div>