JSFiddle - React, Tailwind, and code Playground

by David Thomas

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
}

input[readonly] {
    border-color: red;
}

JavaScript

$('input[name="Edit"]').click(function(){
    $(this).prev('input[required]').prop('readonly',function(i,r){
        console.log(r);
        return !r;
    });
});