Получить ответ Ajax на ввод td таблицы

Question

Я пытаюсь получить ответ Ajax на <td> ввод строки, но он не работает должным образом, он привязывается к вводу, но при попытке добавить другой продукт в строку заменяет предыдущий.

Пример 1:

В приведенном выше примере, как вы можете видеть, сначала я добавил «Камеру» в строку, а затем пытался добавить другой продукт, например «Мобильный»но он заменяет первый.

Затем я попробовал другой подход, но он не извлекает данные в поле ввода.

Пример 2:

В приведенном выше примере он успешно добавляет данные в следующую строку, но его нельзя редактировать.

HTML:

 <div class="table-responsive">
      <table class="table table-bordered table-condensed" id="mytable">
        <div class="row">
           <div>
            <input type="text" id="search" class="form-control"> //To search product by id
          </div>
          <div>
            <button type="button" name="add" id="add" class="btn btn-success">Add Row</button>
          </div>
        </div>
        <thead>
          <tr>
            <th>Product</th>
            <th>Qty</th>
            <th>Price</th>
            <th>Action</th>
          </tr>
        </thead>
        <tr>
        <td><input type="text" name=" addmore[0][name]" id="pname" class="form-control"/></td> //This part commented in Example 2
        <td><input type="text" name="addmore[0][qty]" id="qty" class="form-control"/></td> //This part commented in Example 2
        <td><input type="text" name="addmore[0][price]" id="price" class="form-control"/></td> //This part commented in Example 2
        </tr>
      </table>
    </div>

Скрипт для извлечения данных (пример 1):

<script>
$('#search').on('keydown', function(e) {
if(e.which == 13){
var proid = $("#search").val();
//alert(proid);
$.ajax({
        url: '{{ URL::to('search-product/')}}'+"/"+ proid,
        type: "Get",    
        dataType:"json",   
        success: function (response) 
       {
            $.each(response, function (i, item) {
            $('#pname').val(item.product_name);
            $('#qty').val(1);
            $('#price').val(item.product_price);
            });
        }
    });
}
});
</script>

Скрипт для извлечения данных (пример 2):

<script>
$('#search').on('keydown', function(e) {
if(e.which == 13){
var proid = $("#search").val();
//alert(proid);
$.ajax({
        url: '{{ URL::to('search-product/')}}'+"/"+ proid,
        type: "Get",    
        dataType:"json",   
        success: function (response) 
       {
            var trHTML = '';
            $.each(response, function (i, item) {
                trHTML += '<tr><td>' + item.product_name +
                    '</td><td>' + '1' +
                    '</td><td>' + item.product_price +
                    '</td></tr>';
            });
            $('#mytable').append(trHTML);
        }
    });
}
});
</script>

Скрипт для добавления и удаления строк:

<script type="text/javascript">
  var i = 0;
    $("#add").click(function(){
        ++i;
        $("#mytable").append('<tr><td><input type="text" name="addmore['+i+'][name]" class="form-control" /></td><td><input type="text" name="addmore['+i+'][qty]" class="form-control" /></td><td><input type="text" name="addmore['+i+'][price]" class="form-control" /></td><td><button type="button" class="btn btn-danger remove-tr">Remove</button></td></tr>');
    });
    $(document).on('click', '.remove-tr', function(){  
         $(this).parents('tr').remove();
    });  
</script>

Answer 1

В ответ на мой комментарий замените во втором примере:

$.each(response, function (i, item) {
   trHTML += '<tr><td>' + item.product_name +
       '</td><td>' + '1' +
       '</td><td>' + item.product_price +
       '</td></tr>';
});
$('#mytable').append(trHTML);

на:

$.each(response, function (i, item) {
    trHTML += '<tr>' +
                '<td><input type="text" name=" addmore[0][name]" id="pname' + item.product_name  + '" class="form-control" value="' + item.product_name + '"/></td>' +
                '<td><input type="text" name=" addmore[0][qty]" id="qty'   + item.product_name  + '" class="form-control" value="1"/></td>' +
                '<td><input type="text" name=" addmore[0][price]" id="price' + item.product_name  + '" class="form-control" value="' + item.product_price + '"/></td>' +
              '</tr>';
});
$('#mytable').append(trHTML);