JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <p>Edit the form</p>
    <input type="text" placeholder="one" disabled>
    <input type="text" placeholder="two" disabled>
    <input type="text" placeholder="three" disabled>
    <div id="saveForm">Save Form</div>
    <div id="editForm">Edit Form</div>
</form>

CSS

div,input{
    padding: 10px;
    display: block;
    margin: 10px;
    border-radius: 5px;
    border: 2px solid #000;
}
#saveForm{display: none;color:#ff0000;}
p{display:none;color:#ff0000;}
div{cursor:pointer;}
div:hover{opacity: 0.7;}

JavaScript

$("#editForm").click(function(){
    $("p").show(0);
    $("#saveForm").show(0);
    $("form input").prop('disabled', false);
    $(this).hide(0);
});
$("#saveForm").click(function(){
    $("p").hide(0);
    $("#editForm").show(0);
    $("form input").prop('disabled', true);
    $(this).hide(0);
});