JSFiddle - React, Tailwind, and code Playground

by walkerneo

CSS

*{
    font-family:verdana;
}
.cmrlist{
    width:300px;
    background:lightGrey;
    margin:15px;
    border:1px solid black;
}.cmrlistitem,.cmrlistitemtext{
    font-size:15px;
    text-align:center;
    padding:5px 15px;
    cursor:pointer;
}
.cmrlistitem:hover{
    background:grey;
}.cmrlistitemtext,.cmrlistitemtext:hover{
    border:none;
    background:white;
    box-sizing:border-box;
    width:100%;
    display:none;
}

JavaScript

$(function(){
    var ml = $('<div/>').addClass('cmrlist');
    $(document.body).append(ml);
    for(var i=0;i<10;i++){
        ml.append($('<div/>').addClass('cmrlistitem').text('item '+(i+1)));
        ml.append($('<input/>').addClass('cmrlistitemtext').attr('value','item '+(i+1)))
    }
    $('.cmrlistitem').on('dblclick',function(){
        this.style.display='none';
        var next = $(this).next()[0];
        next.style.display='block';
        next.select();
    });
    $('.cmrlistitemtext').on('keypress blur',function(e){
        if((e.which && e.which == 13) || e.type=='blur'){
            var prev = $(this).prev()[0];
            this.style.display='none';
            prev.innerHTML = this.value;
            prev.style.display='block';
        }
    });
});