JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
    <form method="post" action="">
        <input  class="someClass" type="text" readonly="readonly" name="1" value="A"  border="0" />
        <input  class="someClass" type="text" readonly="readonly" name="2" value="B"  border="0" />
        <input  class="someClass" type="text" readonly="readonly" name="3" value="C"  border="0" />
        <input  class="someClass" type="text" readonly="readonly" name="4" value="D"  border="0" />
        <br />
        <input  type="button" value="EDIT" id="edit-button"/>
    </form>
</div>

CSS

input.borders {
    border:1px solid black;
}

JavaScript

$(document).ready(function() {
    $("#edit-button").click(function() {
        $(".someClass").each(function() {
            $(this).removeAttr("readonly");
            $(this).addClass("borders");
        });
    });
});