I have a javascript where upon click of a button a row is added to the table. Each row has a live search textfield in one td tag and another text field in another td tag, whose value suppose to dynamically change and or determined upon click on the livesearch textfiled results.

I have tried somethin but the challenge I am facing is that the value of the dynamically determined textfield of other rows keep retainin the value of the first row textfiled.

So I am seeking for assistance on how to clean-up the script so that each row will respond according to its respective values in the livesearch textfield

//stock transfer dynamic textboxes

$(document).ready(function(){

$(document).on(‘click’,’.btnaddstockTransfer’,function(){

var html=”;
html+=”;
html+=”;
html+=”;
html+=”;

$(‘#stockTransfer’).append(html);

$(document).ready(function(){

$(‘.search-box input[type=”text”]’).on(“keyup input”, function(){
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(“.result”);
if(inputVal.length){
$.get(“backend-search.php”, {term: inputVal}).done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
});
} else{
resultDropdown.empty();
}
});

// Set search input value on click of result item and get the dynamic quantity from DB
$(document).on(“click”, “.result p”, function(){

$(this).parents(“.search-box”).find(‘.stock’).val($(this).text());

$(this).parent(“.result”).empty();

var tr = $(“.search-box”).parent().parent().parent();
var stock = document.getElementsById(‘stock’).value;

$.ajax({
method: “get”,
url: “saleqtyOnFly.php”,
data: {
item: stock
},

success: function(data) {

tr.find(“.eqty”).val(data);

}
})

});
});