Looking to display two hidden rows at a time out of a total of 5 rows when a display button is clicked. Once the last 2 rows are displayed, the button should become disabled.
Similar to a question on Stack Overflow, but unable to use the solution provided due to the css affecting the data and styling within the rows.
<p><a href="#" id="display">Display More</a></p>
<table>
<tr class="showfirstRow">
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr class="secondRow">
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr class="thirdRow">
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr class="fourthRow">
<td>Meg</td>
<td>Griffin</td>
</tr>
<tr class="fithRow">
<td>Stewie</td>
<td>Griffin</td>
</tr>
</table>
$("#display").click(function() {
// show the next hidden div.group, then disable the display button once all rows have been displayed
});