JSFiddle - React, Tailwind, and code Playground

by wesley_murch

HTML

<button class="add">Add cell</button>
<button class="remove">Remove cell</button>

<div id="nav">
<table>
    <tr>
        <td><a href="#">Link</a></td>
        <td><a href="#">Link</a></td>
        <td><a href="#">Link</a></td>
        <td><a href="#">Link</a></td>
    </tr>
</table>
</div>

CSS

#nav {
     width:500px;
 background:teal;   
}
table{width:100%}
td{text-align:center}
a{display:block}
a:hover{background:red}

JavaScript

$('button.add').click(function(){
    $('td:first').clone().appendTo('table tr');  
});
$('button.remove').click(function(){
    $('td:first').remove();  
});