JSFiddle - React, Tailwind, and code Playground

by thecodeparadox

HTML

<div id='task-header'>
    </div>
    <div id='tasks'>
        <a href="#" id ="add">Add</a>
      <ul>
        <li class ="editable">
          <form class='task'>
            <input class='textfield' type='text' />
          </form>
            <a href="#" class="delete">Delete this row</a>
        </li>
      </ul>
    </div>
    <div id='task-footer'></div>

CSS

#tasks input{
display:inline;
}

.editHover{
border: 2px solid black;
}

JavaScript

var item = $("#tasks ul li:eq(0)");// need to clone for new add
$('#add').click(function() {
    var taskItem = item.clone(true);
    $('#tasks ul').append(taskItem);
    taskItem.find(':input:text').val("");
    return false;
});
$('body').on('click','.delete',function() {
    $(this).parent('li').remove();
    return false;
});
$(".editable").hover(function() {
    $(this).addClass("editHover");
}, function() {
    $(this).removeClass("editHover");
});