javascript - Cannot replace data with modal -

when want change input using modal, changed data last input...not corresponding button clicked on.

here code ():

dashboard.php

<div id="modalpartid" class="modal fade" role="dialog">   <div class="modal-dialog" style="width:70%;overflow-y: initial !important;">     <div class="modal-content">       <div class="modal-header">         <button type="button" class="close" data-dismiss="modal">&times;</button>         <h4 class="modal-title">browse partid</h4>         <br/>         <input type="text" class="form-control" id="searchpartid" placeholder="partid"/>       </div>       <div class="modal-body" style="height: 300px; overflow-y: auto;">         <table class="table table-striped">         <thead>         <tr>           <th>partid</th>           <th>partname</th>           <th>otherid</th>         </tr>         <tbody id="tbodypartid"></tbody>         </thead>         </table>       </div>     </div>   </div> </div> 

dashboard.js

function addtablerowhasilproduksi() {   row = parseint($('#tablerowhasilproduksi').val()) + 1;   $('#plusbuttonhasilproduksi').remove();   var html = ' \     <tr id="rowtablehasilproduksi_' + row + '"> \       <td> \         <div class="input-group"> \           <input id="typepartid_' + row + '" class="form-control ui-autocomplete" type="text" onchange="myfunction(' + row + ')" name="typepartid_' + row + '"  >\           <span class="input-group-btn">\           <button type="button" class="btn btn-default glyphicon glyphicon-folder-open" name="button" id="buttonpartid' + row + '">\           </button>\           </span>\         </div>\       </td> \       <td>\         <select id="hasilproduksi_' + row + '" class="form-control" placeholder="select" onchange="hasilproduksichage(' + row + ')" name="hasilproduksi_' + row + '"> \         <option value="-">--select--</option>\         <option value="good">good</option>\         <option value="repair">repair</option>\         <option value="reject">reject</option>\         </select> \       </td> \       <td><input id="qty_' + row + '" type="text" class="form-control"  onkeydown="return numbersonly(this, event);" onkeyup="javascript:tandapemisahtitik(this);" name="qty_' + row + '" /> \       </td> \       <td id="tdtypereject_' + row + '"> \         <select id="typereject_' + row + '" class="form-control" name="typereject_' + row + '"> \         ' + htmltypereject + ' \         </select> \       </td> \       <td><input id="keteranganreject_' + row + '" type="text" class="form-control" name="keteranganreject_' + row + '"/></td> \       <td><button type="button" class="btn btn-sm btn-default" onclick="deleterowhasilproduksi(' + row + ')">x</button></td> \     </tr> \     <tr id="plusbuttonhasilproduksi"> \       <td colspan="6"><button type="button" class="btn btn-sm btn-default" style="width:100%" onclick="addtablerowhasilproduksi()">+</button></td> \     </tr>';   $('#tablehasilproduksi > tbody').append(html);   //variable row table add +1   $('#tablerowhasilproduksi').val(row);   $('#plusbuttonhasilproduksi').attr('onclick', 'addtablerowdowntime()');   //buttonpartid onbrowse   $('#buttonpartid' + row + '').click(function() {     browsepartid(0, 100, '');   });   $('#searchpartid'+ row + '').keyup(function(e) {     var filter = (e.target.value);     browsepartid(0, 100, filter)   }); } 

browse.js

$('#buttonpartid').click(function() {   browsepartid(0, 100, ''); }); $('#searchpartid').keyup(function(e) {   var filter = (e.target.value);   browsepartid(0, 100, filter) }); function browsepartid(start, limit, filter) {   $.ajax({     async: false,     url: 'api/partid.php?start=' + start + '&limit=' + limit + '&filter=' + filter,     success: function(result) {       var data = result.result;       var trdata = '';        (var = 0; < data.length; i++) {         trdata += ' \           <tr> \           <td><a onclick="isiformpartid(\'' + data[i].partid + '\')">' + data[i].partid + '</a></td> \           <td><a onclick="isiformpartid(\'' + data[i].partid + '\')">' + data[i].partname + '</a></td> \           <td><a onclick="isiformpartid(\'' + data[i].partid + '\')">' + data[i].otherid + '</a></td> \           </tr> \           ';       }        $('#tbodypartid').html(trdata);       $('#modalpartid').modal('show');     }   }); }  function isiformpartid(partid) {   $('input#typepartid_'+row).val(partid);   $('#modalpartid').modal('hide'); } 

last maybe can give me solution, cmiiw. sorry english bad.

look @ picture, maybe understand mean.

okay... if got right, issue row variable.

since cannot test code, can ask try below.
if doesn't work, please create codepen looking project. use static html in modal, since won't able make ajax request.

so, folder icon click:

$('#buttonpartid' + row + '').click(function() {   browsepartid(0, 100, ''); }); 

change to:

$("[id^='buttonpartid']").click(function() {     row = $(this).closest("tr").index();        // keep row number in variable.   browsepartid(0, 100, ''); }); 

the use saved row variable in second click handler:

function isiformpartid(partid) {   $('input#typepartid_'+row).val(partid);     // using correctly here, value wasn't correct.   $('#modalpartid').modal('hide'); }