Fill the table data with corresponding value selected in specific table row

Question

I have a html table wherein i can add rows by clicking on a button. Now each table row contains 8 td's. Based on the value selected from the first input box(autocomplete) in table row, the rest of the td's in that specific row gets filled with the data from database. Now everything is working fine with my code but the only problem is that this thing works only for the first table row.If i add new row and select something new then td's in that row does not get filled with data.I think the problem is that i will have to refer each tr and the td's in it and loop the code through them. But I am not able to do that.Please help me out. Here is the code-

<table class="table table-bordered" id="stock" >
  <thead>
    <tr>
    <td>Sr no.</td>
    <td>Product Name</td>
    <td>Description</td>
    <td>Qty</td>
    <td>Unit</td>
    <td>Rate</td>
    <td>Tax</td>
    <td>Dis</td>
    <td>Total</td>
  <td><input type="button" name="add" id="add" value="+" class="btn btn-warning" /></td>
  </tr>
  </thead>
  <tbody class="details">
<tr>
  <td class="no">1</td>
<td><input type="text" name="items[]" id="items" class="form-control items"  autocomplete="off" /></td>
<td><textarea name="size[]" id="size" class="form-control size" autocomplete="off"></textarea></td>
<td><input type="text" name="qty[]" id="qty" class="form-control qty" autocomplete="off"/></td>
<td><input type="text" name="unit[]" id="unit" class="form-control unit" autocomplete="off"/></td>
<td><input type="text" name="price[]" id="price" class="form-control price" autocomplete="off"/></td>
<td><input type="text" name="tax[]" id="tax" class="form-control tax"  autocomplete="off" /></td>
<td><input type="text" name="dis[]" id="dis" class="form-control dis" autocomplete="off" /></td>

<td><input type="text" name="stkamt[]" id="amt" class="form-control amt" autocomplete="off" /></td>
<td><button class="btn btn-danger remove">X</button></td>
</tr>
  </tbody>
  <tfoot>
</tfoot>
</table>

here is what my add button does-

$(function(){
  $('#add').click(function(){
    addnewrow();
  });
function addnewrow(){
  var n = ($('.details tr').length - 0)+1;
   var tr = '<tr>'+
  '<td class="no">'+n+'</td>'+
'<td><input type="text" name="items[]" id="items" class="form-control items"  autocomplete="off" /></td>'+
'<td><textarea name="size[]" id="size" class="form-control size" autocomplete="off"></textarea></td>'+
'<td><input type="text" name="qty[]" id="qty" class="form-control qty" autocomplete="off"/></td>'+
'<td><input type="text" name="unit[]" id="unit" class="form-control unit" autocomplete="off"/></td>'+
'<td><input type="text" name="price[]" id="price" class="form-control price" autocomplete="off"/></td>'+
'<td><input type="text" name="tax[]" id="tax" class="form-control tax"  autocomplete="off" /></td>'+
'<td><input type="text" name="dis[]" id="dis" class="form-control dis" autocomplete="off" /></td>'+

'<td><input type="text" name="stkamt[]" id="amt" class="form-control amt" autocomplete="off" /></td>'+
'<td><button class="btn btn-danger remove">X</button></td>'+
'</tr>';
$('.details').append(tr);
}

here is what happens when i select a specific item from the autocomplete dropdown in first td and go to the next field-

$('body').delegate('.items','blur',function(){
checkitems();
});
function checkitems(){

var items = $('#items').val();
if(items == ""){

}else{
  $.ajax({
     type: 'post',
    url: 'itemcheck.php', 
    data: {key: items},
     dataType:'json',
    success: function(data) {

     if(data){
      var tr = $(this).closest('tr'); // here is the code for retrieving the values. i think here i need to make some changes     
     $('#price').val(data.rate);
     $('#size').val(data.des);
     $('#qty').val(data.qty);
     $('#unit').val(data.unit);
      }
    else
     {

       $('#myitemmodal').modal("show");

     }
   }
  });
}

}

Here item_check.php checks if the item already exist or not .If it does not exist,it displays a new item dialog box and if it does,then it goes to item_value.php to retrieve the rest of the values and display them in the td's in that table row.This thing works fine for the first row but when i add new rows, it does not work . I have tried to provide as much info as possible ,please let me know if you need anything more.Thanks in advance.

Answer 1

As I have said in comments, IDs must be unique. In your case, when you create new row, IDs are the same and only the first value is taken (even if you write in second, third, etc. row). To solve, you need to: 1) create input with unique ID; 2) retrieve and return data to correct inputs (not just the first ones).

Complete and rewritten code:

HTML side:

<table class="table table-bordered" id="stock" >
    <thead>
    <tr>
        <td>Sr no.</td>
        <td>Product Name</td>
        <td>Description</td>
        <td>Qty</td>
        <td>Unit</td>
        <td>Rate</td>
        <td>Tax</td>
        <td>Dis</td>
        <td>Total</td>
        <td><input type="button" name="add" id="add" value="+" class="btn btn-warning" /></td>
    </tr>
    </thead>
    <tbody class="details">
    <tr>
        <td class="no">1</td>
        <td><input type="text" name="items[]" id="items_1" class="form-control items"  autocomplete="off" /></td>
        <td><textarea name="size[]" id="size_1" class="form-control size" autocomplete="off"></textarea></td>
        <td><input type="text" name="qty[]" id="qty_1" class="form-control qty" autocomplete="off"/></td>
        <td><input type="text" name="unit[]" id="unit_1" class="form-control unit" autocomplete="off"/></td>
        <td><input type="text" name="price[]" id="price_1" class="form-control price" autocomplete="off"/></td>
        <td><input type="text" name="tax[]" id="tax_1" class="form-control tax"  autocomplete="off" /></td>
        <td><input type="text" name="dis[]" id="dis_1" class="form-control dis" autocomplete="off" /></td>
        <td><input type="text" name="stkamt[]" id="amt" class="form-control amt" autocomplete="off" /></td>
        <td><button class="btn btn-danger remove">X</button></td>
    </tr>
    </tbody>
    <tfoot></tfoot>
</table>

JavaScript side:

$(function(){
  $('#add').click(function(){
    addnewrow();
  });
});

function addnewrow()
{
    var n = ($('.details tr').length - 0) + 1;
    var tr = '<tr>'+
        '<td class="no">' + n + '</td>' +
        '<td><input type="text" name="items[]" id="items_' + n + '" class="form-control items"  autocomplete="off" /></td>' +
        '<td><textarea name="size[]" id="size_' + n + '" class="form-control size" autocomplete="off"></textarea></td>' +
        '<td><input type="text" name="qty[]" id="qty_' + n + '" class="form-control qty" autocomplete="off"/></td>' +
        '<td><input type="text" name="unit[]" id="unit_' + n + '" class="form-control unit" autocomplete="off"/></td>' +
        '<td><input type="text" name="price[]" id="price_' + n + '" class="form-control price" autocomplete="off"/></td>' +
        '<td><input type="text" name="tax[]" id="tax_' + n + '" class="form-control tax"  autocomplete="off" /></td>' +
        '<td><input type="text" name="dis[]" id="dis_' + n + '" class="form-control dis" autocomplete="off" /></td>' +
        '<td><input type="text" name="stkamt[]" id="amt_' + n + '" class="form-control amt" autocomplete="off" /></td>' +
        '<td><button class="btn btn-danger remove">X</button></td>' +
        '</tr>';
    $('.details').append(tr);
};

$('body').delegate('.items', 'blur', function(e) {
    checkitems(e.currentTarget.id.split('_')[1]);   // e.currentTarget.id.split('_')[1] - Target element ID
});

function checkitems(targetID)
{
    var items = $('#items_' + targetID).val();
    if (items != "") {
      $.ajax({
        type: 'post',
        url: 'itemcheck.php', 
        data: {key: items},
        dataType: 'json',
        success: function(data) {   
        if (data) {
            var tr = $(this).closest('tr'); // here is the code for retrieving the values. i think here i need to make some changes     
            $('#price_' + targetID).val(data.rate);
            $('#size_' + targetID).val(data.des);
            $('#qty_' + targetID).val(data.qty);
            $('#unit_' + targetID).val(data.unit);
        } else {
           $('#myitemmodal').modal("show");
         }
       }
      });
    }
};

In this case I rewritten code so that each input has unique property attached to its ID (in this case, the number of rows in table, for example, unit_1 instead of unit ).