JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<p id="message">The quick fox stuff</p>
<p id="message">The quick fox stuff</p>
<form id="editForm">
<textarea rows="2" id="editMessage" /></textarea>
<input type="submit" value="Save" onclick="saveMsg(event);"></input>
</form>
<a href="javascript:editLink();">Edit Link</a>
</div>
CSS
#content{
border: 1px solid #bbb;
}
#editForm{
display: none;
}
JavaScript
function editLink(){
document.getElementById("editForm").style.display = "block";
document.getElementById("message").style.display = "none";
var message = document.getElementById("message").innerHTML;
document.getElementById("editMessage").value = message;
}
function saveMsg(e){
e.preventDefault();
document.getElementById("editForm").style.display = "none";
document.getElementById("message").style.display = "block";
}