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>
<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" style="float:right;" id="btnEditAbout"  type="button" ><i class="fas fa-edit"></i> Edit Information </button>  
 
 
 <!-- hidden 2 buttons -->
 <button id="Addemp" type="button">Add Record </button> 
<button id="Removeemp" type="button">Remove Record </button>

CSS

#btnEditAbout  { display: block; }
#Addemp { display: none;  }
#Removeemp { display: none;  }

JavaScript

//removing readonly attribute of input
   $(document).ready(function(){
        $('#btnEditAbout').click(function(){
           var Aboutfields = document.getElementsByClassName('abt');
for(var x=0;x<Aboutfields.length;x++) {
     Aboutfields[x].removeAttribute('readonly','readonly');
}  
        });
        
        //showing hidden buttons when edit information is clicked
        
        var btnEditAbout = document.getElementById( 'btnEditAbout' ),
    Removeemp = document.getElementById( 'Removeemp' );
    Addemp = document.getElementById( 'Addemp' );
   

function toggle() {

    if ( btnEditAbout.style.display === "block" ) {

        btnEditAbout.style.display = "none";
        Addemp.style.display = "block";
        Removeemp.style.display = "block";

    } else { // switch back

        btnEditAbout.style.display = "block";
        Addemp.style.display = "none";
        Removeemp.style.display = "none";
     

    }

}


btnEditAbout.onclick = toggle;
        
    });