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
}
[readonly] {
    border: 1px solid red;
}

JavaScript

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