title: Multiple addEventListener not storing unique callbacks
body: <p>Super sleepy and coding, not a good combination, if I was a surgeon, my patient would have passed away long time ago! So here goes my 1st question on this site:</p>
  
  <p>My code:</p>
  
  <pre><code>function cAction(manipulatedElement) {
      console.log(manipulatedElement); //test parameter
      // some manipulation code...
  }
  
  var cboxes = document.getElementsByClassName('checkbox-toppings');
  
  l = cboxes.length;
  for(i = 0; i &lt; l; i++) {
      cboxes[i].addEventListener('change',
          function() { cAction(i); },
          false
      );
  }
  </code></pre>
  
  <p>When I check/uncheck a checkbox I only get "34" (the last checkbox) written to the console no matter which one is checked what gives?  Shouldn't each event listener's callback remember the index number "i"?</p>
  
  <p>Hope someone can help me with this.</p>
  
  <p>Some HTML pasted from project:</p>
  
  <pre><code>&lt;div class="toppings col-xs-6 col-sm-4 col-md-3"&gt;
      &lt;div class="checkbox"&gt;&lt;label&gt;
          &lt;input 
              type="checkbox" 
              class="checkbox-toppings" 
              id="topp1010" 
              value=""
              data-price="300"
          &gt;
          &lt;span class="toppings-text"&gt;pepperoni&lt;/span&gt;
      &lt;/label&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="toppings col-xs-6 col-sm-4 col-md-3"&gt;
      &lt;div class="checkbox"&gt;&lt;label&gt;
          &lt;input 
              type="checkbox" 
              class="checkbox-toppings" 
              id="topp1020" 
              value=""
              data-price="300"
          &gt;
          &lt;span class="toppings-text"&gt;ham&lt;/span&gt;
      &lt;/label&gt;&lt;/div&gt;
  &lt;/div&gt; 
  
  &lt;!-- and 32 more items like this --&gt;
  </code></pre>