JSFiddle - React, Tailwind, and code Playground

HTML

<div id="row">Teststring 123</div>
<span id="showEdit">Edit</span>

<br/><br/>

Click the edit button to edit the text.<br/>
Press enter or the Save button to save the changes.<br/>
Click somewhere else to cancle editing.

CSS

body {
    font-family: Tahoma;
}

#row {
    border: 1px solid #aaa;
    padding: 5px;
    margin-bottom: 20px;
}
#showEdit {
    cursor: pointer;
}
#editSave, #showEdit {
    border: 1px solid #555;
    padding: 5px;
    background-color: #ccc;
    cursor: pointer;
}

JavaScript

$('#showEdit').click(function() {
        $('#row').data('text',$('#row').text());
        $('#row').html('<input type="text" id="editInput" /> <span id="editSave">Save</span>');
        $('#editInput').val($('#row').data('text')).focus();
    });
    
    $('#row').delegate('#editInput','keyup',function(e) {
        e.stopPropagation();
        var keycode = e.keyCode || e.which;
        
        if (keycode == 13) $('#editSave').click();
    }).delegate('#editSave','click',function(e) {
        e.stopPropagation();
        
        $('#row').text($('#editInput').val());
    }).delegate('#editInput','blur',function() {
        $('#row').text($('#row').data('text'));
    });