如何更新使用jQuery

Question

基於數量的數量價格，我想創建一個購物車，其中一個客戶選擇自動添加到cart.and基於量價的數量可以更新自動完成搜索的項目。我已成功添加到購物車，但無法動態更新價格。 任何人都可以點我什麼是與現有的代碼中的錯誤：

$('#searchName').autocomplete({ 
    source: '{!! asset('nameAutocomplete') !!}', 
    select:function(suggestion,ui){ 
     event.preventDefault(); 
     var $tbody = $('#example tbody'); 
     $tbody.append('<tr><td class="id">' + ui.item.id + 
      '</td><td class="name">' + ui.item.value + 
      '</td><td class="price" id="price">' + ui.item.price + 
      '</td><td><input type="text" id="quantity" value="1"/></td><td><input type="text" id="total" readonly value="'+ui.item.price+'" class="readonly"/></td></tr>'); 

     $('#quantity').on('keyup',function(){ 
      var tot = ui.item.price * this.value; 
      $('#total').val(tot); 
     }); 
    }     
}); 

下面是表的部分代碼：

<table class="table table-striped table-bordered" id="example"> 
    <thead> 
     <tr>       
      <td>ID</td> 
      <td>Name</td> 
      <td>Price</td> 
      <td>Quantity</td> 
      <td>Total</td>      
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 

錯誤我越來越：

Answer 1

請與下面的代碼，我添加了點點@Mayank代碼，

 var $tbody = $('#example tbody'); 
     $tbody.append('<tr><td class="id">' + ui.item.id + 
     '</td><td class="name">' + ui.item.value + 
     '</td><td class="price">' + ui.item.price + 
     '</td><td><input type="text" class="quantity" value="1"/></td><td><input type="text" class="total" readonly value="'+ui.item.price+'" class="readonly"/></td></tr>'); 


     $('.quantity').on('keyup',function(){ 
      //Corrected part 
      var tot = $(this).parent().prev().html() * this.value; 
      //var tot = ui.item.price * this.value; 
      //Assume that you are getting correct value to tot variable 
      $(this).parent().next().find('.total').val(tot);  
     }); 

Answer 2

讓下面像代碼更改：

var $tbody = $('#example tbody'); 
$tbody.append('<tr><td class="id">' + ui.item.id + 
    '</td><td class="name">' + ui.item.value + 
    '</td><td class="price">' + ui.item.price + 
    '</td><td><input type="text" class="quantity" value="1"/></td><td><input type="text" class="total" readonly value="'+ui.item.price+'" class="readonly"/></td></tr>'); 

    // Use class in place of id, as you cannot work with id for multiple occurance of same html 

$('.quantity').on('keyup',function(){ 
    var tot = ui.item.price * this.value; 
    $(this).find('.total').val(tot); // Use DOM traverse to get the next <input type="text" /> and put new total value to it 
});