Как обновить цену, основанную на количестве количества, используя jquery

Question

Я хочу создать корзину покупок, где клиент выбирает элемент из автоматического поиска автозаполнения, который автоматически добавляется в корзину. И на основе количества цены количества может быть обновлено. Я добавил в корзину успешно, но я не мог динамически обновлять цену. Может кто-нибудь мне точку, что это ошибка с существующим кодом:

$('#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 
});