JSFiddle - React, Tailwind, and code Playground

HTML

<script>
    $(document).ready(function(){
       $('#edit').click(function(){
         document.getElementById("collapseOne").contentEditable="true";
         $('#collapseOne').attr('style','border:2px solid;');
         $('#edit').attr('style','display:none;');
         $('#done').attr('style','display:block;');
       });
    
       $('#done').click(function(){
         document.getElementById("collapseOne").contentEditable="false";
         $('#collapseOne').attr('style','border:none;');
         $('#edit').attr('style','display:block;');
         $('#done').attr('style','display:none;');
       });
    
       $('#delete').click(function(){
         $('#collapseOne').text('');
      })
    });
</script>
<div class="container">
    <div class="col-lg-12">
        <h1 class="page-header">
            We are hiring!
        </h1>
        <div class="panel-group" id="accordion">
            <div class="panel panel-default" id="panel1">
               
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-target="#collapseOne"
                           href="#collapseOne">
                            .Net Developer  : Posted on 24th Feb
                        </a> 
                        <a href='#' style="float:right" id="edit">Edit</a>  
                        <a href='#' style="display:none;" id="done">Done</a>
                        <a href='#' style="float:center;margin-left:100px;" id="delete">Delete</a>
                    </h4>  
                   
                </div>
                <div id="collapseOne" class="panel-collapse collapse in">
                    <div class="panel-body">
                    <p class="lead justified">
                        Qualifications and Skills:
                    </p>
                    <ul class="fa-ul">
                        <li>
                            <i class="fa"></i><span class="lead justified"> BE...