Pass data from bs modal to cloned input fields - php

Question

So i have this issue trying to pass data from bs modal to form inputs, the logic is when i type in first row and press enter a bs modal pops up and show data from database in a table every row has its respective select button so when i click select the chosen row fills up the input fields in the form but after cloning the next rows of inputs and repeat the steps to fill the form from bs modal this only updates all of the fields with same data
Here is an image of the issue
here's my code i've been stuck here for days..
<script>
$(document).ready(function() {
$(".card").on('keyup', '.live_search', function() {
var input = $(this).val();
if (input != "") {
$.ajax({
type: "POST",
url: "livesearch.php",
data: {
input: input
},
success: function(data) {
$(".searchresult").html(data);
$(".searchresult").css("display", "block");
}
});
} else {
$(".searchresult").css("display", "none");
}
});
$(".add-row").click(function(e) {
e.preventDefault();
$("#show-item").prepend(`<tr>
<input type="hidden" name="id[]">
<td class="col-2">
<div class="input-group input-group-sm">
<a href="#" class="btn btn-danger delete-row"> <i class="fa-solid fa-trash-can"></i>
</a>
<input type="text" class="form-control live_search" name="material_name[]" placeholder="Nombre Material">
</div>
</td>
<td class="col-1">
<div class="input-group input-group-sm ">
<input type="text" class="form-control" name="measure_one[]">
</div>
</td>
<td class=" col-1">
<div class="input-group input-group-sm ">
<input type="text" class="form-control" name="measure_two[]">
</div>
</td>
<td class=" col-2">
<div class="input-group input-group-sm ">
<input type="text" class="form-control" name="unit_measure[]">
</div>
</td>
<td class=" col-1">
<div class="input-group input-group-sm ">
<input type="text" class="form-control" name="length[]">
</div>
</td>
<td class=" col-1">
<div class="input-group input-group-sm ">
<input type="text" class="form-control" name="width[]">
</div>
</td>
<td class=" col-1">
<div class="input-group input-group-sm">
<input type="text" class="form-control" name="price[]">
</div>
</td>
</tr>`);
});
// remove product row
$('.card').on('click', '.delete-row', function(evt) {
evt.preventDefault();
$(this).closest('tr').remove();
});
// modal pops up when pressing enter
$('.card').on('keyup', '.live_search', function(e) {
var keycode = (e.keyCode ? e.keyCode : e.which);
if (keycode == '13') {
// $('.modal').modal('show');
var product = $(this);
$('#insert').modal('show', {
backdrop: 'static',
keyboard: false
}).on('click', '#selected', function(e) {
var id = $(this).attr('data-material-id');
var material = $(this).attr('data-material-name');
var measure_one = $(this).attr('data-material-measure_one');
var measure_two = $(this).attr('data-material-measure_two');
var unit_measure = $(this).attr('data-material-unit_measure');
var length = $(this).attr('data-material-length');
var width = $(this).attr('data-material-width');
var price = $(this).attr('data-material-price');
$(product).closest('tr').find('[name="supplier_id[]"]').val(id);
$(product).closest('tr').find('[name="material_name[]"]').val(material);
$(product).closest('tr').find('[name="measure_one[]"]').val(measure_one);
$(product).closest('tr').find('[name="measure_two[]"]').val(measure_two);
$(product).closest('tr').find('[name="unit_measure[]"]').val(unit_measure);
$(product).closest('tr').find('[name="length[]"]').val(length);
$(product).closest('tr').find('[name="width[]"]').val(width);
$(product).closest('tr').find('[name="price[]"]').val(price);
$('#insert').modal('hide');
});
return false;
}
});
});
</script>
if (mysqli_num_rows($result) > 0) { ?>
<table class="table table-bordered table-striped table-hover table-sm text-center">
<thead class="table-primary">
<tr>
<th>ID</th>
<th>Proveedor</th>
<th>Material</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<?php while ($row = mysqli_fetch_assoc($result)) :
$id = $row['supplier_id'];
$supplier = $row['supplier'];
$material = $row['material'];
?>
<tr>
<td><?php echo $id ?></td>
<td><?php echo $supplier ?></td>
<td><?php echo $material ?></td>
<td>
<?php echo '<a href="#" class="btn btn-link" id="selected" datamaterial-id="' . $row['supplier_id'] . '"
data-material-name="' . $row['material'] . '" data-material-measure_one="' . $row['measure_one'] . '"
data-material-measure_two="' . $row['measure_two'] . '" data-material-unit_measure="' . $row['unit_measure'] . '"
data-material-length="' . $row['length'] . '" data-material-width="' . $row['width'] . '"
data-material-price="' . $row['price'] . '">Select</a>';
?>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>

Answer 1

This row in the last keyup eventlistener
var product = $(this);
will select every row.
Try this instead:
var product = $(e.target);
Read more about event.target here.