title: Increase variable in for loop
body: <p>I have a variable I only want to increment if the condition is met in the for loop. The other code in the if statement works perfectly but the variable never increments. Is it possible to do this in jQuery?</p>
  
  <p>Here is a simplified example of what I have been trying:</p>
  
  <pre><code>var i = 0;
  for (var c = 1; c &lt; 3; c++) { 
      if(condition){
          i++;
      }
  }
  </code></pre>
  
  <p>EDIT: I apologize for my question being a little unclear. </p>
  
  <p>Here's what I am actually trying to do:</p>
  
  <pre><code>&lt;button id="showNew"&gt;Show Next Button&lt;/button&gt;
  
  &lt;button id='button1' style="display:none;"&gt;Button 1&lt;/button&gt;
  &lt;button id='button2' style="display:none;"&gt;Button 2&lt;/button&gt;
  &lt;button id='button3' style="display:none;"&gt;Button 3&lt;/button&gt;
  
  &lt;span id="value1" style="display:none;"&gt;123&lt;/span&gt;
  &lt;span id="value2" style="display:none;"&gt;456&lt;/span&gt;
  &lt;span id="value3" style="display:none;"&gt;0&lt;/span&gt;
  
  &lt;script&gt;
  var i = 0;
  for (var c = 1; c &lt; 3; c++) { 
      var start = jQuery('#value' + c).text();
  
      if(start != "0"){
          jQuery('#button' + c).show();
          i++;
      }
  }
  
  jQuery(document).ready(function() {
      jQuery('#showNew').on("click", function () {
          jQuery('#button' + ++i).show();
          return false;
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The first two buttons show when the page loads but I have to click the "#showNew" button 3 times before the third button is shown.</p>
  
  <p>I made a <a href="http://jsfiddle.net/mczwg7qw/" rel="nofollow">jsFiddle</a> and it works fine so there must be a conflict with something else on my site. The weird thing is if I put "alert(i);" immediately after the for loop on my site I get the number I'm looking for (2). It appears to be reseting "i" back to zero once it reaches the onclick for some reason.</p>