title: .forEach loop: use variable
body: <p>I'm looping through a set of 16 ids and assigning an <code>eventListener</code> to each one.  I want to send a number to my php file (1 for the first id, 2 for the second, etc, etc), but it seems that <code>i</code> is more dynamic than I'd like it to be.  Every id sends <code>17</code>.</p>
  
  <pre><code>klasses.forEach(function(klass){
      var svgElement = svgDoc.getElementById(klass); //get the inner element by id
      svgElement.addEventListener("mouseup",function(){
          $.ajax({
              type: "POST",
              url: "buildService.php",
              data: { "service" : i}
          }).done(function(msg){
              alert(lameArray[i]);
              $("#modalSpan").html(msg);
              $("#modmodal").modal();
          });
      });
      i++;
  });
  </code></pre>
  
  <p>How can I set each one to a specific number?  I've also tried:</p>
  
  <pre><code>var lameArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
  ...
  data: { "service" : lameArray[i]}
  </code></pre>