JSFiddle - React, Tailwind, and code Playground

HTML

<div class="panel panel-default" id="editable">
                    <div class="panel-body">
                       Drop-down code 
                       <a id='edit_case'>Edit</a>
                        Panel-Body Code... 
                     </div>
Panel footer
</div>

JavaScript

$(document).on('click','#cancel',function(){  
        $("#editable").html(oldHTML);
    });


    var oldHTML = $("#editable").html();
$(document).on('click','#edit_case',function(){  

    var oldHTML = $("#editable").html();
    var newHTML;

    newHTML = "<div class='panel-body' id='edit_fields'></div> <div class='panel-footer' id='footer-bottons'></div>"
    $("#editable").html(newHTML);
    $('#footer-bottons').html('<div class="text-right"><button class="btn btn-primary btn-sm" id="save">Save</button> <button class="btn btn-default btn-sm" id="cancel">Cancel</button></div>');

});