JSFiddle - React, Tailwind, and code Playground

by g33ky

HTML

<button id='addFruit'>Add fruit</button>
<ul id="fruitList">
    <li class="fruit">Apple
        <button class="delete">Delete</button>
    </li>
    <li class="fruit">Banana
        <button class="delete">Delete</button>
    </li>
    <li class="fruit">Orange
        <button class="delete">Delete</button>
    </li>
</ul>

CSS

#fruitList {
    margin: 0 auto;
    list-style:none;
    border: 1px solid #000000;
    width:150px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    padding:20px;
}

.fruit{
    cursor:pointer;
    border:1px solid #dddddd;
    background:#eeeeee;
    margin:5px;
    padding:5px;
}

button{
    background:#eeeeee;
    cursor:pointer;
}

JavaScript

$("#fruitList").sortable();

$("#fruitList .delete").click(function () {
    $(this).parent().remove();
});

$("#addFruit").click(function () {
    $('#fruitList').append("<li class='fruit'>New fruit<button class='delete'>Delete</button></li>");
});