JSFiddle - React, Tailwind, and code Playground

by wirey00

HTML

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

CSS

label{
    display:block
}

JavaScript

$('input[name=edit]').click(function(){
    var x = $(this).prop('readonly'); 
    $(this).val(x ? 'edit','change')
                .prev('input')
                .prop('readonly',!x);
});