JSFiddle - React, Tailwind, and code Playground
HTML
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<td>20</td>
</tr>
<tr style='display:none;' class='noShow'>
<td>21</td>
</tr>
<tr style='display:none;' class='noShow'>
<td>22</td>
</tr>
<tr style='display:none;' class='noShow'>
<td>23</td>
</tr>
<tr style='display:none;' class='noShow'>
<td>24</td>
</tr>
<tr style='display:none;' class='noShow'>
<td>25</td>
</tr>
<tr style='display:none;' class='noShow'>
<td>26</td>
</tr>
<tr style='display:none;' class='noShow'>
<td>26</td>
</tr>
<tr style='display:none;' class='noShow'>
<td>26</td>
</tr>
<tr style='display:none;' class='noShow'>
<td>26</td>
</tr>
<tr style='display:none;' class='noShow'>
<td>26</td>
</tr>
<tr style='display:none;' class='noShow'>
<td>26</td>
</tr>
<tr style='display:none;' class='noShow'>
<td>26</td>
</tr>
<tr style='display:none;' class='noShow'>
<td>26</td>
</tr>
<tr style='display:none;' class='noShow'>
<td>26</td>
</tr> <tr style='display:none;' class='noShow'>
<td>26</td>
</tr> <tr style='display:none;' class='noShow'>
<td>26</td>
</tr>
<tr style='display:none;' class='noShow'>
<td>26</td>
</tr>
<tr style='display:none;' class='noShow'>
<td>26</td>
</tr> <tr style='display:none;' class='noShow'>
<td>26</td>
</tr>
<tr style='display:none;' class='noShow'>
<td>26</td>
</tr>
<tr style='display:none;' class='noShow'>
<td>26</td>
</tr>
<tr style='display:none;'...
JavaScript
$("#button").click(function () {
$(".table-striped tr:hidden").slice($(".table-striped tr:hidden").first().index(),2).show(); // 3 elements each
});