title: Select element with jquery inside a handlebars each iteration
body: <p>I'm building for exercise a e-shop. I'm displaying a list of product in the HTML, using handlebars.</p>
  
  <p>For every element I'm adding a button that should allow the user to add the item in the shopping cart. It's not working because every time I click on the button I add all the list and not only the single object.</p>
  
  <p>So I know that I'm passing all the list (because I pass 'list' as argument), I was wondering how pass only the current item for every button. I'm not sure how to do it.</p>
  
  <p>html:</p>
  
  <pre><code>  &lt;div class="container-fluid"&gt;
      &lt;script id="list-items" type="text/x-handlebars-template"&gt;​
        {{#each list}}
          &lt;div class="items col-lg-3 col-md-4 col-sm-6 col-xs-12"&gt;
            Category: {{ category}} &lt;/br&gt;
            Name: {{ name }} &lt;/br&gt;
            Price: {{ price }} &lt;/br&gt;
            Quantity: {{ quantity }}
            &lt;button class="addItem" class="btn"&gt;Buy&lt;/button&gt;
          &lt;/div&gt;
        {{/each}}
      &lt;/script&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>var ShoppingCart = function () {
    this.cart = [];
  };
  
  ShoppingCart.prototype.addItem = function(item) {
    this.cart.push(item);
  };
  
  
  shoppingCart = new ShoppingCart();
  
  $('.addItem').click(function() {
    shoppingCart.addItem(list);
  });
  </code></pre>