添加多个产品时，jquery表不更新价格

下面是我的代码副本 一旦我填写了表格详细信息、产品、数量，它会显示价格和总计小计，但是当我添加一行新的产品详细信息时，它不会显示价格或行的总计

 $(document).ready(function() {

 // remove product row
$('#invoice_table').on('click', ".delete-row", function(e) {
  e.preventDefault();
$(this).closest('tr').remove();
  calculateTotal();
});

 // add new product row on invoice
 var cloned = $('#invoice_table tr:last').clone();
  $(".add-row").click(function(e) {
   e.preventDefault();
   cloned.clone().appendTo('#invoice_table');
 });

  $('#invoice_table tbody tr').each(function(e, tr) {
   $('#stockID', tr).on('change', function() {
   $('#unitPrice', tr).val($('option:selected', this).attr('data-price'));
   });
 })


 calculateTotal();

  $('#invoice_table').on('change keyup paste', '.calculate', function() {
 updateTotals(this);
calculateTotal();
  });

 function updateTotals(elem) {
 var tr = $(elem).closest('tr'),
  quantity = $('[name="quantity[]"]', tr).val(),
  price = $('[name="unitPrice[]"]', tr).val(),

  total = parseInt(quantity) * parseFloat(price);

  $('.calculate-sub', tr).val(total.toFixed(2));
 }

    function calculateTotal() {

    var grandTotal = 0,
     disc = 0;
   $('#invoice_table tbody tr').each(function() {
     var c_sbt = $('.calculate-sub', this).val(),
    quantity = $('[name="quantity[]"]', this).val(),
    price = $('[name="unitPrice[]"]', this).val(),
    total = parseInt(quantity) * parseFloat(price);

  grandTotal += parseFloat(c_sbt);

   });
  // VAT, DISCOUNT, TOTAL, total:
   var subT = parseFloat(grandTotal);
   $('.total').text(subT.toFixed(2));
  }

  });

html

产品
数量
价格
小计
T恤
裤子
夹克
1.
2.
3.
4.
5.
£
£


总计：




0.00英镑

您的浏览器控制台中是否有任何错误？我正在使用JSFIddle您可以发布代码的HTML部分吗？id必须是唯一的，您不能在每一行上使用

id=“stockID”

。如何将行添加到表中？

 <table class="table table-bordered" id="invoice_table">
 <thead>
   <tr>
     <th>
       <a href="#" class="btn btn-primary btn-xs add-row"><span            class="glyphicon glyphicon-plus" aria-hidden="true"></span></a>
      </th>
      <th>
       <h4>Product</h4>
     </th>
      <th>
       <h4>Qty</h4>
     </th>
     <th>
     <h4>Price</h4>
     </th>
     <th>
    <h4>Sub Total</h4>
    </th>
    </tr>
   </thead>
   <tbody>
   <tr>
  <td>
    <a href="#" class="btn btn-danger btn-xs delete-row"><span class="glyphicon glyphicon-remove"></span></a>
   </td>
   <td class="text-right">
    <div class=" form-group form-group-sm">
      <select name="stockID[]" class="stockID form-control input-sm calculate" id="stockID">
        <option value=""></option>
        <option value="1" data-price="10.00">T-Shirt</option>
        <option value="2" data-price="15.00">Trousers</option>
        <option value="3" data-price="25.00">Jacket</option>
      </select>
    </div>
   </td>
    <td class="text-right">
    <div class=" form-group form-group-sm">
      <select name="quantity[]" style="width:100px" class="form-control input-sm calculate" id="quantity">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div>
     </td>
     <td class="text-right">
     <div class="input-group input-group-sm">
      <span class="input-group-addon">£</span>
      <input type="text" class="form-control calculate" name="unitPrice[]" id="unitPrice" disabled>
     </div>
    </td>
     <td class="text-right">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">£</span>
      <input type="text" class="form-control calculate-sub" name="total[]" value="0.00" disabled>
    </div>
     </td>


    </tr>
 </tbody>
 </table>
 <div class="row text-right">
 <div class="col-xs-2 col-xs-offset-8">
   <p>
  <strong>
                    Total: <br>
                </strong>
   </p>
 </div>
   <div class="col-xs-2">
    <strong>
                    £<span class="total">0.00</span> <br>
                </strong>
  </div> 
</div>