JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="task-group">
                	<li class="active"><a href="#">Personal</a></li>
                	                	<li class="active"><a href="#">Work</a></li>

                </ul>	
					
					
					<input type="text" name="task-group" style="display:none">

JavaScript

$(document).ready(function () {

var addInput = $('input[name="task-group"]').hide();
var beforeItems = $('li.active');
    
beforeItems.on('dblclick', itemClick);
    
function inputKeydown(e) {
    var $this = $(e.target).closest('input[type="text"]');
    
    if (e.keyCode == 13) {
        $this.blur();
    }
}

function itemClick(e) {
    
    var $this = $(e.target).closest('li.active');
    txt = $this.find('a').text();
    
       
    var input = $("<input type='text'/>").val(txt);
    $this.html('');
    
    input.appendTo($this).focus();
    input.on('blur', editInputBlur);
    input.keydown(inputKeydown);
}


function editInputBlur(e) {
    var $this = $(e.target).closest('input[type="text"]');
    var v = $this.val();
    if (v.trim() == "") {
        v= txt;
    } 
    var $a = $("<a href='#'>" + v + "</a>");
        $this.parent().append($a);
        $this.remove();
}


});