JSFiddle - React, Tailwind, and code Playground

by nokiko

HTML

<table id="limittable">
    <tr><td>One</td></tr>
    <tr><td>Two</td></tr>
    <tr><td>Three</td></tr>
    <tr><td>Four</td></tr>
    <tr><td>Five</td></tr>
    <tr class="hide"><td>Six</td></tr>
    <tr class="hide"><td>Seven</td></tr>
    <tr class="hide"><td>Eight</td></tr>
    <tr class="hide"><td>Nine</td></tr>
    <tr class="hide"><td>Ten</td></tr>
</table>
<button id="btnadd">+ 1</button><button id="btnremove">- 1</button>

CSS

#limittable tr.hide {display:none}

JavaScript

$('#btnadd').click(function(){
    $('#limittable tr:hidden:first').show();
});
$('#btnremove').click(function(){
    $('#limittable tr:visible:last').hide();
});