JSFiddle - React, Tailwind, and code Playground

by wesley_murch

HTML

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


<ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

CSS

ul {
    width:500px;
    background:red;  
    margin:20px 0 0; 
    display:table;
    width:100%;
}

li{
    text-align:center;
    display:table-cell;
}
a{
    border:1px solid #000;
    display:block;
    background:#fff;
    margin:0 0 0 4px;
}
ul li:first-child a {
    margin:0;   
}
a:hover{background:#ccc}

JavaScript

$('button.add').click(function() {
    $('li:first').clone().appendTo('ul');
});
$('button.remove').click(function() {
    $('li:first').remove();
});