JSFiddle - React, Tailwind, and code Playground

by dying_sakura

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input class="form-control form-control-sm abt" readonly name="Highschool_school" value="" type="text" placeholder="">


<!-- when this button is clicked, it will remove the readonly of the input type. Additionally, it will show the hidden 2 buttons -->
<button class="btn btn-secondary float-right toggle" style="float:right;" id="btnEditAbout" type="button"><i class="fas fa-edit"></i> Edit Information </button>


<!-- hidden 2 buttons -->
<button id="Addemp" type="button" class="hide">Add Record </button>
<button id="Removeemp" type="button" class="hide">Remove Record </button>
<button id="btnCancel" type="button" class="hide toggle">Cancel</button>

CSS

.hide { display: none }

JavaScript

$(function() {
  $('.toggle').on("click", function() {
    const edit = this.id === "btnEditAbout"; // what did we click 
    $("#Addemp").toggleClass('hide',!edit)
    $("#Removeemp").toggleClass('hide',!edit)
    $("#btnCancel").toggleClass('hide',!edit)
    $("#btnEditAbout").toggleClass('hide',!edit)
    if (edit) $(".abt").removeAttr('readonly');
    else  $(".abt").attr('readonly',true);
  });
});