JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
    <button id="new-div" type="button">New Div</button>
    <button id="new-p" type="button">New P</button>
    <button id="del" type="button">Del</button>
    
    <div id="elements-container">
    </div>
    
    <div id="p-editor">
        <h2>P Editor</h2>
        <textarea rows="10" cols="50"></textarea>
        <br />
        <button class="save" type="button">Save</button>
        <button class="done" type="button">Done editing</button>
        <button class="delete" type="button">Delete</button>
    </div>
    
    <div id="div-editor">
        <h2>DIV Editor</h2>
        <textarea rows="10" cols="50"></textarea>
        <br />
        <button class="save" type="button">Save</button>
        <button class="done" type="button">Done editing</button>
        <button class="delete" type="button">Delete</button>
    </div>
</body>
</html>

CSS

.editable {
    background-color: #EAEAEA;
    margin: 20px 10px;
    padding: 10px;
    border: none;
    cursor: pointer;
}

.form-control{
  padding:10px;
  margin-left:20px;
  margin-top:20px;
  border-radius:10px;
  float:left;
}

textarea {
    padding: 5px;
}

.editable:hover {
    border: 2px dashed red;
}


#p-editor, #div-editor {
    background-color: green;
    margin: 20px;
    padding: 10px;
    display: none;
}

#div-editor {
    background-color: yellow;
}

.editing {
    background-color: red;
}

JavaScript

// When they click on a div element, initialize the div editor
$('div.editable').live('click', function() {
    editEl = $(this);
    $('#p-editor').hide();
    $(editEl).addClass('editing');
    $('#div-editor').show();
    $('#div-editor textarea').val($(editEl).html());
});

// When they click on a p element, initialize the p editor
$('p.editable').live('click', function() {
    editEl = $(this);
    $('#div-editor').hide();
    $(editEl).addClass('editing');
    $('#p-editor').show();
    $('#p-editor textarea').val($(editEl).html());
});

// When they click the "Done Editing" button, close the editor
$('.done').click(function() {
    $('#p-editor, #div-editor').hide();
    $(editEl).removeClass('editing');
});

$('#del').on('click', function(){
	$("#elements-container").html("");
});

// Delete the clicked div element
$('.delete').click(function() {
    $(editEl).remove();
    $('#p-editor, #div-editor').hide();
});

// Update the clicked div element when they click the "Save" button
$('.save').click(function() {
    $(editEl).html($(this).parent().find('textarea').val());
});

// Add a new div element
$('#new-div').click(function() {
    var id = $('#elements-container').children().length + 1;
    $('#elements-container').append('<input id="'+id+'" class="form-control">');
});