title: Foreach Loop with Jquery Variable
body: <p>I have the following code: </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="single-count_contain"&gt;
  &lt;div class="less"&gt;&lt;img src="img/single_arrow_left.png"&gt;&lt;/div&gt;
  &lt;div class="theCount"&gt;1&lt;/div&gt;
  &lt;div class="add"&gt;&lt;img src="img/single_arrow_right.png"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var counter = 1;
  
  $(".add").click(function(){
  
  counter++;
  
  $(this).closest(".single-count_contain").find(".theCount").text(counter);
  
  });
  
  
  $(".less").click(function(){
  
   counter--;
  
  $(this).closest(".single-count_contain").find(".theCount").text(counter);
  
  });  
  </code></pre>
  
  <p>This works as intended, increment and decrement my counter variable. But i need to use it in a foreach loop. </p>
  
  <p>How can i have the same variable, but different results in each counter generated but the foreach loop? </p>
  
  <p>Thank you!</p>