JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="heaven">
    <li><label for="sleep"><input type="checkbox" id="sleep" name="check" value="sleep"/><span>sleep</span></label></li>
    <li><label for="wake"><input type="checkbox" id="wake" name="check" value="wake"/><span>       wake           up</span></label></li>
  </ul>
<input type='text' id="input">

CSS

ul#u{
    list-style: none;
    margin: 0;
    padding: 0;
}

JavaScript

$(document).ready(function(){
    
    htmlInput = $('#input');
    htmlInput.hide();
    
    $("#heaven").on('dblclick','span',function() {
        htmlInput.show();
        var text = $.trim($(this).text());
        while (text.indexOf("  ") > 0)
            text = text.replace("  ", " ");
        var LI = $(this).closest("li");
        $(this).replaceWith(htmlInput);
        LI.find("input:text").val(text).addClass("editable");
        htmlInput.show().focus();
        
    }).on('blur','.editable', function() {
        var content = htmlInput.val();
        $(this).closest("li").append("<span>"+content+"</span>");
        $(this).remove();
        htmlInput.hide();      
    });

    
    /*
    $("#heaven").on('click', 'label', function(e){
        if($(e.target).is(":checked")){
            alert('true');
        }
    });*/
    
});