JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="task-list">
    <li>
        <div class="show-task">
            <input type="checkbox">
            <label class="">Task 1</label>	<a href="#" class="delete-task">X</a> 
        </div>
        <div class="edit-task">
            <form>
                <input type="text" value="" class="form-field-2">
            </form>
        </div>
    </li>
    <li>
        <div class="show-task">
            <input type="checkbox">
            <label class="">Task 2</label>	<a href="#" class="delete-task">X</a> 
        </div>
        <div class="edit-task">
            <form>
                <input type="text" value="" class="form-field-2">
            </form>
        </div>
    </li>
    <li>
        <div class="show-task">
            <input type="checkbox">
            <label class="">Task 3</label>	<a href="#" class="delete-task">X</a> 
        </div>
        <div class="edit-task">
            <form>
                <input type="text" value="" class="form-field-2">
            </form>
        </div>
    </li>
</ul>

CSS

a {
    text-decoration: none;
}
ol, ul {
    list-style: none;
}
.task-list {
    width: 300px;
}
.task-list li {
    padding: 25px 0 16px 0;
    border-top: 1px solid #bfbfbf;
    font-size: 0.9em;
}
.task-list li:first-child {
    border-top: 0;
}
.show-task {
    overflow: hidden;
}
.show-task {
    overflow: hidden;
}
.show-task.inactive {
    display: none;
}
.marked-task {
    text-decoration: line-through;
}
.delete-task {
    float: right;
    display: none;
    color: #0000ee;
    cursor: pointer;
}
.delete-task:active {
    color: #ff0000;
    cursor: pointer;
}
.delete-task.visible {
    display: block !important;
}
.edit-task {
    display: none;
}
.edit-task.active {
    display: block;
}
.form-field-2 {
    font-size: 0.9em;
    margin: 0.25em 0 0.25em 0;
    padding: 8px;
    border: 1px solid #FFA500;
    color: #A9A9A9;
    width: 280px;
    font-weight: bold;
}

JavaScript

$(document).ready(function () {
    $('.show-task').hover(function () {
        $(this).children('.delete-task').toggleClass('visible');
    });

    $('.show-task label').click(function () {
        var value = $(this).html();
        $(this).parent('.show-task').css("display", "none");
        $(this).closest('li').find('.edit-task').css("display", "block").find('.form-field-2').focus().val(value);
    });

    $('.form-field-2').blur(function () {
        var value = $(this).val();
        $(this).closest('.edit-task').css("display", "none");
        $(this).closest('li').find('.show-task').css("display", "block").find('label').html(value);
    });

    $('.form-field-2').keypress(function (e) {
        var code = e.keyCode || e.which;
        if (code == 13) {
            var value = $(this).val();
            $(this).closest('.edit-task').css("display", "none");
            $(this).closest('li').find('.show-task').css("display", "block").find('.show-task label').html(value);
        }
    });
});