title: addEventListener using for loop and passing values
body: <p>I'm trying to add event listener to multiple objects using a for loop, but end up with all listeners targeting the same object --> the last one.</p>
  
  <p>If I add the listeners manually by defining boxa and boxb for every instance, it works. I guess it's the addEvent for-loop that's not working the way I hoped for. Maybe I use the wrong approach altogether.</p>
  
  <p>Example using 4 of the class="container"
  Trigger on container 4 works the way it´s supposed to.
  Trigger on container 1,2,3 trigger event on container 4, but only if trigger has already been activated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Function to run on click:
  function makeItHappen(elem, elem2) {
    var el = document.getElementById(elem);
    el.style.backgroundColor = "red";
    var el2 = document.getElementById(elem2);
    el2.style.backgroundColor = "blue";
  }
  
  // Autoloading function to add the listeners:
  var elem = document.getElementsByClassName("triggerClass");
  
  for (var i = 0; i &lt; elem.length; i += 2) {
    var k = i + 1;
    var boxa = elem[i].parentNode.id;
    var boxb = elem[k].parentNode.id;
  
    elem[i].addEventListener("click", function() {
      makeItHappen(boxa, boxb);
    }, false);
    elem[k].addEventListener("click", function() {
      makeItHappen(boxb, boxa);
    }, false);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="one" id="box1"&gt;
      &lt;p class="triggerClass"&gt;some text&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="two" id="box2"&gt;
      &lt;p class="triggerClass"&gt;some text&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="one" id="box3"&gt;
      &lt;p class="triggerClass"&gt;some text&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="two" id="box4"&gt;
      &lt;p class="triggerClass"&gt;some text&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>