title: For loop to show next item
body: <p>I've got a div containing an order list and a button below. Now what I would like to happen is that when the button is clicked you add a class to the first li and when the button is clicked again it jumps to the second li and so on until it gets to the last li and then it stops. Here's my code.</p>
  
  <p>At the moment I'm using console.log just see what happens but every time I click it shows all the list item.</p>
  
  <pre><code>&lt;style&gt;
    .hl { background: green; }
  &lt;/style&gt;
  
  &lt;div class="large-2 large-centered columns"&gt;
      &lt;ol&gt;
       &lt;li&gt;some&lt;/li&gt; 
       &lt;li&gt;some&lt;/li&gt; 
       &lt;li&gt;some&lt;/li&gt; 
       &lt;li&gt;some&lt;/li&gt; 
       &lt;li&gt;some&lt;/li&gt; 
       &lt;li&gt;some&lt;/li&gt; 
       &lt;li&gt;some&lt;/li&gt; 
      &lt;/ol&gt;
      &lt;button&gt;Click Me&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
    $(document).ready(function(){
      var item = $('ol').find('li');
      var btn = $('button');
  
      btn.click(function(e){
        e.preventDefault();
        for (var i = 0; i &lt; item.length; i++) {
           console.log([i]);
        };
      });
    });
  &lt;/script&gt;
  </code></pre>