title: How to show more than one table row on click
body: <p>I have 5 rows accompanied with a display button from when clicked I would like to display two of the hidden rows at a time. I would then like the display button to become disabled once the last 2 rows have been displayed. </p>
  
  <p>This question is very similar to <a href="https://stackoverflow.com/questions/38936561/how-to-load-more-than-one-div-at-a-time">this</a> question except I cannot use the answer because the display:block css alters the data and styling within the row. </p>
  
  <pre><code>&lt;p&gt;&lt;a href="#" id="display"&gt;Display More&lt;/a&gt;&lt;/p&gt;
  
  &lt;table&gt;
   &lt;tr class="showfirstRow"&gt;
    &lt;th&gt;First Name&lt;/th&gt;
    &lt;th&gt;Last Name&lt;/th&gt;
  &lt;/tr&gt;
   &lt;tr class="secondRow"&gt;
    &lt;td&gt;Peter&lt;/td&gt;
    &lt;td&gt;Griffin&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="thirdRow"&gt;
    &lt;td&gt;Lois&lt;/td&gt;
    &lt;td&gt;Griffin&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="fourthRow"&gt;
   &lt;td&gt;Meg&lt;/td&gt;
   &lt;td&gt;Griffin&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="fithRow"&gt;
   &lt;td&gt;Stewie&lt;/td&gt;
   &lt;td&gt;Griffin&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  
  $("#display").click(function() {
  // show the next hidden div.group, then disable the display button once all rows have been displayed
  });
  </code></pre>