JSFiddle - React, Tailwind, and code Playground

HTML

<h1>List</h1>
<input type="text" id="new-text"/>
<ul id="todolist">

</ul>
<br>
<input type="checkbox" id="select_all" />Select all

JavaScript

function addListItem() {
    var text = $('#new-text').val();
    $("#todolist").append('<li ><input type="checkbox" class="edit"/ ><span>' + text + ' </span><button class="delete">Delete</button></li>');
    $("#new-text").val('');
};

function clearCompleted() {
    if ($('.edit').is(":checked"))
    {
        $('li').parent().remove();

    }
}

function deleteItem() {
    $(this).parent().remove();
}

function finishItem() {
    if ( $(this).parent().css('textDecoration') == 'line-through' ) {
        $(this).parent().css('textDecoration', 'none');
        $('.edit').removeClass('.edit').addClass('completed');
    }   else    {

        $(this).parent().css('textDecoration', 'line-through');
        $('input').removeClass('.completed').addClass('edit');
    }
}

    $(function() {
    $('#new-text').keyup(function(e){
        if (e.keyCode === 13) {
            addListItem();
        }
    });

    $(document).on('click', '.delete', deleteItem);
    $(document).on('click', '.edit', finishItem);
    $("#select_all").click(function () {
        $('input:checkbox').not(this).prop('checked', this.checked);
        if ( $('li').css('textDecoration') == 'line-through' ) {
            $('li').css('textDecoration', 'none')
        }   else    {

            $('li').css('textDecoration', 'line-through');
        }
    });


});


$(document).ready(function(){
    $("#clearcompleted").click(clearCompleted);

    var oriVal;
    $('#todolist').on('dblclick', 'span', function () {
        position = $(this).position();
        var input = $("<input type='text' style='position:absolute'>").appendTo(this);
        input.css({left: position.left, top: position.top});
        input.val($(this).text());
        input.focus();
    });
    
    $('#todolist').on('keyup', 'span', (function(e){
        if (e.keyCode === 13) {
            var $this = $(this);
            $this.parent().text($(this).val() || oriVal);
            $this.remove();
        }}));

});