title: Javascript get value from html class name in for loop not working
body: <pre><code>foreach($products as $row){
    &lt;input type="hidden" class="prodId" name="id" value="&lt;?php echo $row['id']; ?&gt;"&gt;
    &lt;input type="hidden" class="prodUnique" name="unique" value="&lt;?php echo $unique; ?&gt;"&gt;
    &lt;button id="added" onClick="addToCart()" class="button btn-cart" title="Add to Cart" type="button"&gt;&lt;span&gt;&lt;i class="icon-basket"&gt;&lt;/i&gt; Add to Cart&lt;/span&gt;&lt;/button&gt;
  }
  
  &lt;script&gt;
  function addToCart(){
     var id = $(".prodId").val();
     var unique = $(".prodUnique").val();
     console.log(id);
  }
  &lt;/scritp&gt;
  </code></pre>
  
  <p>Every time it is showing only first product ID. Means the id's are getting displayed properly in HTML, But When I console it in javascript, It shows same id.
  Suppose there are 4 products with ID 100, 101, 103, 105 displaying, then whenever I click on any product, the value every time getting consoled in javascript is 100.</p>