jQuery only gets the value of the last row - php

Question

I'm retreiving the "In Stock" data using MySQL
<table class="table table-striped table-bordered table-hover results table-fixed">
<thead>
<tr>
<th class="text-center">#</th>
<th>Product Name</th>
<th>Description</th>
<th>Price</th>
<th>In Stock</th>
<th style="width: 20%">Quantity</th>
</tr>
<tr class="warning no-result">
<td colspan="8"><i class="fa fa-warning"></i> No Product Found</td>
</tr>
</thead>
<tbody>
<?php
$query = "SELECT * FROM products";
$exec = mysqli_query($connection, $query);
while ($row = mysqli_fetch_array($exec)) {
$product_id = $row['product_id'];
$product_name = $row['product_name'];
$description = $row['description'];
$product_quantity = $row['quantity'];
$product_price = $row['sell_price'];
?>
<tr>
<td class="text-center"><?php echo $product_id; ?>
<input type="hidden" name="product_id[]" value="<?php echo $product_id; ?>">
</td>
<td><?php echo $product_name; ?></td>
<td><?php echo $description; ?></td>
<td><?php echo $product_price; ?></td>
<td><input type="number" value="<?php echo $product_quantity; ?>" id="qtyResult" disabled></td>
<td><input type="number" name="qtyBuy[]" id="qtyBuy" onkeyup="updateStock()"></td>
</tr>
<?php } ?>
</tbody>
</table>
I want to update the In Stock field automatically when I type a number on the quantity field.
The "San Mig Light's" stock is 500 but when I type a number on quantity field, the stock changes to the last record on the table which is 45.
The rest of the row doesn't also work except for the first one.
Here is my jQuery script.
<script>
function updateStock() {
var inputQty = $('#qtyBuy').val();
var inStock = "<?php echo $product_quantity; ?>"
$('#qtyResult').val(inStock - inputQty);
}
</script>
Table

Answer 1

Try to pass to your function the this and event keywords like:
<td><input type="number" name="qtyBuy[]" id="qtyBuy" onkeyup="updateStock(this, event)"></td>
Because the ID must be unique, try to appent a number like: qtyBuy1, qtyBuy2...
And to select these fields you can: find('input[id^="qtyResult"]') : select input field where the id starts with the string "qtyResult".
So, in your updateStock you can use the parameters to refers to the current values like:
function updateStock(obj, event) {
var inputQty = obj.value;
var inStock = "<?php echo $product_quantity; ?>";
$(obj).closest('tr').find('input[id^="qtyResult"]').val(inStock - inputQty);
}
The snippet:
function updateStock(obj, event) {
var inputQty = obj.value;
var inStock = $(obj).closest('tr').find('input[id^="qtyResult"]').val();
var av = $(obj).closest('tr').find('input[id^="qtyResult"]').data('savedValue');
if (av == undefined) {
$(obj).closest('tr').find('input[id^="qtyResult"]').data('savedValue', inStock);
av = inStock;
}
inStock = av;
console.log(av + ' / ' + inStock + ' / ' + inputQty);
$(obj).closest('tr').find('input[id^="qtyResult"]').val(inStock - inputQty);
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<table class="table table-striped table-bordered table-hover results table-fixed">
<thead>
<tr>
<th class="text-center">#</th>
<th>Product Name</th>
<th>Description</th>
<th>Price</th>
<th>In Stock</th>
<th style="width: 20%">Quantity</th>
</tr>
<tr class="warning no-result">
<td colspan="8"><i class="fa fa-warning"></i> No Product Found</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">product_id1
<input type="hidden" name="product_id[]" value="1">
</td>
<td>product name1</td>
<td>description1</td>
<td>product_price1</td>
<td><input type="number" value="1" id="qtyResult1" disabled></td>
<td><input type="number" name="qtyBuy[]" id="qtyBuy1" onkeyup="updateStock(this, event)"></td>
</tr>
<tr>
<td class="text-center">product_id2
<input type="hidden" name="product_id[]" value="<?php echo $product_id; ?>">
</td>
<td>product_name2</td>
<td>description2</td>
<td>product_price2</td>
<td><input type="number" value="1" id="qtyResult2" disabled></td>
<td><input type="number" name="qtyBuy[]" id="qtyBuy2" onkeyup="updateStock(this, event)"></td>
</tr>
</tbody>
</table>

Answer 2

jQuery 3.4.1
Specify this in your js script to get the correct row.
$('.myclickedclass').click(function() {
var id=$(this).data("mydataid"); // This is the most important line
$.ajax({
url:"myserverfile.php",
method:"POST",
data:{id:id},
dataType:"text",
success:function(data) {
// Whatever
}
});
});