JSFiddle - React, Tailwind, and code Playground

by Nabaraj Saha

HTML

<p><span class='txtToInput'>0.5</span></p>
<p><span class='txtToInput'>0.8</span></p>

JavaScript

textbox=false;
$(function () {    
    $('.txtToInput').live('click', function (e) {
        e.stopPropagation();
        if(!textbox) {
        var input = $('<input />', {'type': 'text','class': 'txtToInput', 'name': 'aname', 'value': $(this).html()});
        $(this).parent().append(input);
        $(this).remove();
            input.datepicker({
                onClose:function(){
                hideText(input);
                }
            });
          input.focus(); 
       textbox=true;
        }        
    });
    
	});
function hideText(inElm){
    var span = $('<span />', {'class': 'txtToInput'});
    inElm.parent().append($(span).html(inElm.val()));
    inElm.remove();
    textbox=false;
}