JSFiddle - React, Tailwind, and code Playground

HTML

<div id="edit2" style="background:#dddddd;height:200px;width:200px;word-wrap:break-word">
   <div id="editpane">
    <b>blah</b> blah blah
   </div>
  </div>

  <a href="#" onclick="var t = document.getElementsByTagName('html')[0].innerHTML;alert(t);">save changes</a>

JavaScript

var $edit2 = $('#edit2');

$edit2.live('click',function(){

    if($("#menu").length == 0){
   
      $edit2.before('<div id="menu" style="height:10px;width:100%"><span style="width:10px;background-color:red">hi</span><span style="width:10px;background:blue">there</span></div>');
    }
    
    if($("#menu2").length == 0){
      $edit2.after('<div id="menu2" style="height:10px;width:100%"><span style="width:10px;background:red">hi</span><span style="width:10px;background:blue">there</span></div>');
  }
  this.contentEditable = true;
  this.focus();
 });

 $edit2.live('blur',function(){
  $("#menu").remove();
  //$("#menu2").remove();
  this.contentEditable = false;
 });