On changing input using ajax only 1st row works not all

When I try to change the number of quantity and then I want to update the total price according to that…using ajax but only first row works and all others rows does not work. Ajax request is only working for 1st rows not for other rows.

Cart Page :

DB Structure :

cart.php

<tbody>
                    <?php  
                        require_once 'config.php';
                        $stmt = $conn->prepare("SELECT * FROM cart");
                        $stmt->execute();
                        $result = $stmt->get_result();
                        $sum = 0;
                        while($row = $result->fetch_assoc()):
                    ?>
                    <tr>
                        <td><?= $row['id'] ?></td>
                        <input id="pid" type="hidden" value="<?= $row['id'] ?>">
                        <td><img src="<?= $row['product_image'] ?>" width="50"></td>
                        <td><?= $row['product_name'] ?></td>
                        <td>Rs. <?= number_format($row['product_price'],2) ?></td>
                        <input type="hidden" value="<?= $row['product_price'] ?>" id="pprice">
                        <td><input type="number" class="form-control" value="<?= $row['qty'] ?>" id="itemQty" style="width:75px;"></td>
                        <td>Rs. <?= number_format($row['total_price'],2) ?></td>
                        <td><a href="action.php?remove=<?= $row['id'] ?>" class="badge-danger badge">Remove</a></td>
                    </tr>
                    <?php $sum += $row['total_price']; ?>
                <?php endwhile; ?>
                <tr>
                    <td colspan="5"><b>Grand Total</b></td>
                    <td><b>Rs. <?= number_format($sum,2); ?></b></td>
                    <td><a href="#" class="btn btn-info">Checkout</a></td>
                </tr>
                </tbody>

ajax code

$("#itemQty").on('change',function(){
            var qty = $(this).val();
            var pid = $("#pid").val();
            var pprice = $("#pprice").val();
            location.reload(true);
            $.ajax({
                url: 'action.php',
                method: 'post',
                cache: false,
                data: {qty:qty,pid:pid,pprice:pprice},
                success: function(response){
                    console.log(response);
                }
            });
        });

action.php

if(isset($_POST['qty'])){
        $qty = $_POST['qty'];
        $pid = $_POST['pid'];
        $pprice = $_POST['pprice'];
        $tprice = $qty*$pprice;

        $stmt = $conn->prepare("UPDATE cart SET qty=?,total_price=? WHERE id=?");
        $stmt->bind_param("iis",$qty,$tprice,$pid);
        $stmt->execute();
    }

Answer

Yes, because you use id and it takes element from first row. You should use class instead of id:

1. id=”pid” change by class=”pid”
2. id=”itemQty” change by class=”itemQty” etc.

And take element from current row. Something like this:

$(".itemQty").on('change',function(){

    var $el = $(this).closest('tr'); //Find parent tr element 
    var qty = $(this).val();
    var pid = $el.find(".pid").val(); //Find element with class pid in current tr ($el)
    var pprice = $el.find(".pprice").val();

    $.ajax({
        url: 'action.php',
        method: 'post',
        cache: false,
        data: {qty:qty,pid:pid,pprice:pprice},
        success: function(response){
            console.log(response);
        }
    });
});