JSFiddle - React, Tailwind, and code Playground
HTML
<div class="profileForm">
<fieldset>
<label>Name<input type="text" id="name" name="name" runat="server" readonly=""/></label>
<label>Email<input type="email" id="email" name="email" runat="server" readonly=""/></label>
<label>Date Of Birth<input type="date" id="dob" name="dob" runat="server" readonly=""/></label>
<label>Address<input type="text" id="address" name="address" runat="server" readonly=""/></label>
<label>City<input type="text" id="city" name="city" runat="server" readonly=""/></label>
<label>State<input type="text" id="state" name="state" runat="server" readonly=""/></label>
<label>Country<input type="text" id="country" name="country" runat="server" readonly=""/></label>
<label>Access Level<input type="text" id="accessLevel" name="accessLevel" runat="server" readonly=""/></label>
</fieldset>
</div>
<div class="profileEdit">
<fieldset>
<label><a href="#" id="Aname">edit</a></label>
<label><a href="#" id="Aemail">edit</a></label>
<label><a href="#" id="Adob">edit</a></label>
<label><a href="#" id="Aaddress">edit</a></label>
<label><a href="#" id="Acity">edit</a></label>
<label><a href="#" id="Astate">edit</a></label>
<label><a href="#" id="Acountry">edit</a></label>
</fieldset>
</div>
JavaScript
$(document).ready(function () {
$(".profileEdit label a").each(function (e) {
$(this).click(function (elem) {
$("#" + this.id.substring(1,this.id.length)).attr("readonly", false);
});
});
});