JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<div id="container">
    <div class="editContain">
        <p class="editable">This is editable text...</p>
    </div>
    <div class="editContain">
        <p class="editable">This is also editable text...</p>
    </div>
    <div class="editContain">
        <p class="editable">This is also editable text...</p>
    </div>
</div>

CSS

#container {
    width: 400px;
    border: solid 1px #000;
    padding: 10px;
}
.editable {
    border: solid 1px #000;
    padding: 10px;
    margin-bottom: 10px;
}
.editMode {
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
}

JavaScript

$('.editable').click(function () {

    pContent = $(this).text();
    $('<input type="text" class="editMode" value="' + pContent + '" /><button class="saveEditable">Save</button>').insertAfter(this);
    $(this).css({
        'display': 'none'
    });

    $('.saveEditable').click(function () {
        newPcontent = $(this).siblings('.editMode').val();
        $(this).siblings('.editable').text(newPcontent);
        $(this).siblings('.editable').css({
            'display': 'block'
        });
        $(this).siblings('.editMode').remove();
        $(this).remove();
    });

    $(document).keypress(function (e) {
        if (e.which == 13) {
            $('.saveEditable').click();
        }
    });

});