title: How to get product id from a loop using jquery?
body: <p>I am building a shopping cart. I want to get the product Id of each product in the loop but I just get the first product id</p>
  
  <p>Code update *</p>
  
  <pre><code>@if(Session::has('shopping_cart'))
      @foreach(Session::get('shopping_cart') as $item)
          &lt;input type="hidden" name="product_id" value="{{$item['code']}}" id="product_id"&gt;
          &lt;div class="row mt-3 pb-3" style="border-bottom: 1px solid #ddd;"&gt;
                  &lt;select name="qty" id="qty" data-product-id="{{$item['code']}}"&gt;
                      @for($i=1; $i&lt;=5; $i++)
                      &lt;option &lt;?php if($item["quantity"]== $i) echo "selected";?&gt; value="{{$i}}"&gt;{{$i}}&lt;/option&gt;
                      @endfor
                  &lt;/select&gt;
          &lt;/div&gt;
  
          &lt;?php $total_price += ($item["price"]*$item["quantity"]); ?&gt;
      @endforeach
  @endif
  </code></pre>
  
  <p>The javascript that gets the the product id</p>
  
  <pre><code>const qtys = document.querySelectorAll('#qty');
  
  for(const qty of qtys){
      qty.addEventListener('change', changeTheQuantity);
      var product_ids = $(this).data('product_id');
      console.log(product_ids);
  }
  // add_to_cart.addEventListener('click', addToCart);
  for(const qty of qtys){
      qty.addEventListener('change', changeTheQuantity);
  
      var product_ids = $(this).data('product_id');
      console.log(product_ids);
  }
  
  function changeTheQuantity(e){
      var qty_val = $(this).val();
      var product_id = $('#product_id').val();
      e.preventDefault();
          $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
          });
          var data = {qty_val, product_id, _token: '{!! csrf_token() !!}'};
          $.ajax({
              type:'GET',
              url:'/products/cart/update-cart',
              data:data,
              success:function(data){
                  console.log('success')
                 console.log(data.total);
                 $('#total').text(data.total);
              }
  
          });
  
  }
  </code></pre>
  
  <p>I updated my code thanks. I have tried everything that I can but it not yet working</p>