JSFiddle - React, Tailwind, and code Playground

HTML

<form>
        <label>First Name</label>
        <input type="text" placeholder="Lorem" required readonly /><input name="Edit" type="button" value="Edit" class="edit">
        <label>First Name</label>
        <input type="text" placeholder="Lorem" required readonly /><input name="Edit" type="button" value="Edit" class="edit">
        <label>Email ID</label>
        <input type="email" placeholder="Lorem" required readonly /><input name="Edit" type="button" value="Edit" class="edit">
        <label>Password</label>
        <input type="password" placeholder="********" required readonly /><input name="Change" type="Button" value="Change" class="edit">
      </form>

CSS

label{
    display:block
}

JavaScript

$(function() {
    $(".edit").click(function() {
        var $this = $(this);
        if($this.hasClass("edit")) {
            $this.removeClass("edit").addClass("save").val("save").prev().
            attr("readonly",false);
        } else {
            $this.removeClass("save").addClass("edit").val("edit").prev().
            attr("readonly","readonly");         
          }
    });
})