title: Iterate through array elements one by one when clicking on button
body: <p>How can I have it so that each time the button is clicked the array is iterated through once? If I click it a second time, it should display the second array element, etc. until it iterates through the entire array.</p>
  
  <p>JavaScript:</p>
  
  <pre><code>var images = [
      "&lt;img src='first.png' /&gt;",
      "&lt;img src='second.png' /&gt;",
      "&lt;img src='third.png' /&gt;",
      "&lt;img src='kitten.png' /&gt;"
  ];
  
  var button = document.getElementsByClassName("btn-lg")[0];
  
  button.addEventListener("click", function(){
      for(i = 0; i &lt; 5; i++) {    
          jQuery('.row.text-center').append(images[i]);
      }       
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="row text-center"&gt;
      &lt;button type="submit" class="btn btn-lg btn-info"&gt;Click Here!&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/KVs6S/1/" rel="nofollow">http://jsfiddle.net/KVs6S/1/</a></p>
  
  <p>Thanks!</p>