Inut looped in the laravel is not working with JS

i'm new to developing and laravel, i'm working on laravel cart and stuck at one point where i would need to update the quantity in the cart taking the user input, when i looped the data and there are more items in cart the update of quantity is working for the first item only and for all other items it is not working. can you please look at my code and advise?

<h2>Cart Controller</h2>

public function quantity(Request $request){
        $qty = $request->qty;
        $pid = $request->pid;

        $pros = DB::table('carts')
        ->where('product_id',$pid)->first();
        $total = $pros->product_price;

        $cart = DB::table('carts')
        ->where('user_id',Auth::user()->id)
        ->where('product_id',$pid)
        ->update(['product_quantity'=>$qty,       'Total'=>$qty * $total]);

    }


<h2>Cart View</h2>


@extends('master.master')

@section('content')

<div id="content">
<div class="container">
<div class="row">
<div class="header text-center">
<h3 class="small-title">Your Cart</h3>
</div>
<div class="col-md-12">
<div class="wishlist">
<div class="col-md-4 col-sm-4 text-center">
<p>Product</p>
</div>
<div class="col-md-2 col-sm-2">
<p>Price</p>
</div>
<div class="col-md-2 col-sm-2">
<p>Quantity</p>
</div>
<div class="col-md-2 col-sm-2">
<p>Total</p>
</div>
<div class="col-md-2 col-sm-2">
<p>Close</p>
</div>
</div>
</div>

@foreach($carts as $cart)

<div class="wishlist-entry clearfix">
<div class="col-md-4 col-sm-4">
<div class="cart-entry">
<a class="image" href="#"><img src="" alt=""></a>
<div class="cart-content">
<h4 class="title"></h4>
<p></p>
</div>
</div>
</div>
<div class="col-md-2 col-sm-2 entry">
<div class="price">
 <span>₹</span>
</div>
</div>
<div class="col-md-2 col-sm-2">
<ul class="quantity-selector">
<input style="text-align: center;width: 30%" type="text" pid="" id="Quantity" value="">
</ul>
</div>
<div class="col-md-2 col-sm-2 entry">
<div class="price">
 <span>₹</span>
</div>
</div>
<div class="col-md-2 col-sm-2 entry">
<a class="btn-close" href="/remove/"><i class="icon-close"></i></a>
</div>
</div>

@endforeach

@if(isset($status))
    <h4></h4>
@endif

</div>
</div>
</div>

<div class="container" style="width: 30%">
    <div class="card card--padding fill-bg">
    <a href="/checkout" class="btn btn-common btn-full">Check Out <span class="icon-action-redo"></span></a>
    </div>
</div>

<br>



@endsection



<h2>JS CODE</h2>

$(document).ready(function(){
    $("#Quantity").on('change keyup',function(){
        var qty = $("#Quantity").val();
        var pid = $("#Quantity").attr('pid');

        $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
});
        $.ajax({

            url :'/quantity',
            data: {pid:pid,qty:qty},
            method:'POST',
            success:function(data){

            }
        })
    })
})

via Chebli Mohamed