how to get a data using a class in jquery

some of the products in my listing page have have a attributes while others do not have.i have added a juery and ajx function to add data to the carts table.but i am having an issue whereby the jquery only get the same product_id for all the products instead for each product.how can i fix this.her are my specific codes.

      <input class="prod_id" name="product_id" type="hidden" value="{{ $product->id }}">
       <input name="quantity" type="number" value="1" class="prod_qty" >
     @if ($product->is_attribute==0)
       <input class="prod_size" name="productattrsize" type="hidden" value="small">
         <div class="d-flex align-items-center">
           <div class="d-flex flex-row">
             <?php $discountedprice=Merchadise::getdiscountedprice($product->id);?>
              @if ($discountedprice>0)
                <del>
                  <p class="text-decoration-line-through">sh {{$product->merch_price }}</p>
                </del>
                <p class="text-decoration-line-through">sh {{ $discountedprice }}</p>
              @else
                 <p class="text-decoration-line-through">sh {{$product->merch_price }}</p>
              @endif
            </div>
          </div>    
          @elseif ($product->is_attribute==1)
          <select class="prod_size" id="getattrprice" productid="{{ $product->id }}" name="productattrsize">
            <option value="">Select</option>
              @foreach ($product->merchadiseattributes as $attribute )
                <option value="{{ $attribute->productattr_size }}">{{ $attribute->productattr_size }}</option>
             @endforeach
       </select>
     <div class="d-flex align-items-center justify-content-between pt-3">
       <div class="d-flex flex-row">
         <?php $discountedprice=Merchadise::getdiscountedprice($product->id);?>
         @if ($discountedprice>0)
        <del>
          <p class="lead text-muted text-decoration-line-through" id="showattrprice">sh {{$product->merch_price }}</p>
        </del>
      <p class="lead text-muted text-decoration-line-through ml-3" id="showcalculatedattrprice" style="float-right">sh {{ $discountedprice }}</p>
     @endif
   </div>
 </div>
  @endif

here is my jquery code that gets the data

     $('.add-to-cart').click(function(e){
        e.preventDefault();

        var prod_id=$(this).closest('.ps-shop').find('.prod_id').val();

        var prod_qty=$(this).closest('.ps-shop').find('.prod_qty').val();

        var prod_size=$(this).closest('.ps-shop').find('.prod_size').val();
        console.log(prod_size);
        // alert(prod_size);
        $.ajax({
            method:"post",
            url:"add-to-cart",
            data:{
                'productattrsize':prod_size,
                'product_id':prod_id,
                'quantity':prod_qty,
            },
            success:function(response){
                swal(response.status)
            }
        });
    });