Ajax form in foreach loop not working without first index

I am working on a ecommerce project. This is a part of shopping cart. The shopping cart looks like [this][1]. For the plus minus button in each product I am using ajax to increment or decrement. The products are called by loop and for each index there is plus minus button.

Blade file

 @foreach(AppModelCart::totalCarts() as $cart)
 <form id="minusForm">
 @csrf
 <input type="hidden" id="id" name="id" value="{{$cart->id}}">
 <button type="submit" data-id="{{ $cart->id  }}" class="minus-button">-</button> 
 </form>         
 <input id="num" type="text" name="cqty" value="{{ $cart['product_quantity']}}">
<span class="price" >৳- <p id="price">{{ $cart->product->price * $cart->product_quantity }}</p></span>
@endforeach

First I tried this way. But only first index of the loop is working. Its properly incrementing or decrementing the product quantity but only for first product. From 2nd index nothing is works.

<script>
    $("#minusForm").submit(function(e){
        e.preventDefault();
        let id = $("#id").val();
        $('#num').html('');
        $.ajax({
            url:'/carts/minus',
            
            type: "GET",
            data:{
                id : id,
            },
            success:function(data){
                $('#num').val(data.product_quantity);
            },
            error: function() {
                    alert("Error Cart");
                }
        })
    })

I tried with only class. If I click any plus or minus button. It return the same value for every product. So I tried without Id and changed this to

$(".minus-button").submit(function(e){  //----here id to class
        e.preventDefault(); 
        let id = $(this).data('id'); //-----here
        $('#num').html('');
        jQuery.ajax({
            url:'/carts/minus' + id, //-----here
            type: "GET",
            data:{
                id : id,
            },
            success:function(data){
                $('#num').val(data.product_quantity);
            },
            error: function() {
                    alert("Error Cart");
                }
        })
    })

Now nothing is working. How can I update the data using ajax inside a loop?
[1]: https://i.stack.imgur.com/8kcQJ.png