title: Changing hidden to visible state of Table > TR on click
body: <p>I've a table with almost 100 rows, I'm displaying 20 as default by adding a class to the tr as <strong>visible</strong> and hiding the rest of rows by the class <strong>hidden</strong></p>
  
  <pre><code>&lt;tbody&gt;
      &lt;tr class="visible"&gt;&lt;/tr&gt;
      &lt;tr class="visible"&gt;&lt;/tr&gt;
      &lt;tr class="hidden"&gt;&lt;/tr&gt;
      &lt;tr class="hidden"&gt;&lt;/tr&gt;
      &lt;tr class="hidden"&gt;&lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>I've added an <strong>Add More</strong> button to display 5 rows each time the button is clicked but my jQuery logic is completely wrong, Have a look at it</p>
  
  <pre><code>$(".more-show").click(function (e)  {
      e.preventDefault();
      for (var i = 0; i&lt;5; i++) {
          $('#ranking-table tr').each(function(i) {
              $(this).removeClass("hidden").addClass("visible");
          });
      }
  });
  </code></pre>
  
  <hr>
  
  <h2>PROBLEM</h2>
  
  <p>Instead of displaying 5 rows each time upon click and it has to be the very first 5 <strong>hidden</strong> rows, It's displaying all the rows by changing the class to <strong>visible</strong></p>