title: append a span at caret in contenteditable div when I click on another div
body: <p>I am trying to insert travelAllowance in between "+" and "basic" as shown in below Image, without deleting the present ones. </p>
  
  <p><img src="https://i.stack.imgur.com/S4kKu.png" alt="image"> </p>
  
  <p>The complete code has given below. I have searched the whole internet but unable to find the answer.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
   debugger;
   $("#display").html("");
   var formula = "";
   var data = [
       "BasicPay ",
        "OverTime ",
        "TravelAllowance ",
        "DearnessAllowance ",
        "FoodAllowance ",
        "providentFund "
       ];
      $( "#autofill" ).autocomplete({
        source:data,
        autoFocus: true ,
    select: function( event, ui ) {
         debugger;
     $("#display").append("&lt;span class='block' contentEditable='false'&gt;" + ui.item.value + "&lt;/span&gt;");
    $( "input[name='autofill']").val("");
         return false;    
             }
   });  
     $("#showPayTypes").html("Allowed Pay Types are : " + data.toString());  
   $(".operators").click(function(){ 
    debugger;
    var selectedOperator = $(this).html();
    $("#display").append("&lt;span contentEditable='false' class='block'&gt;"  + selectedOperator  + " " + "&lt;/span&gt;");
   });
   $("#delete").click(function(){
    debugger;
    if ($("#display span").first().attr('class') == "noClass") {
    var yourString = $.trim($("#display").text());
    var result = yourString.substring(1, yourString.length-1);
    var formulaArray = result.split(" ");
    formulaArray.forEach(main);
    function main(arrayItem, index, array) {
     debugger;
     var regExForOnlyNum = RegExp(/^\d+$/).test(arrayItem);
     if (regExForOnlyNum == true) {
      var bracesSpanObj = "&lt;span contentEditable='false' class='numbers'&gt;" + arrayItem+ " " + "&lt;/span&gt;";
      formulaArray[index] = bracesSpanObj;
     }else
     if (arrayItem == '(' || arrayItem == ')') {
      var bracesSpanObj = "&lt;span contentEditable='false'&gt;" + arrayItem+ " " + "&lt;/span&gt;";
      formulaArray[index] = bracesSpanObj;
     }
     else 
     if (arrayItem != "") {
        var spanObj = "&lt;span contentEditable='false' class='block'&gt;" + arrayItem+ " " + "&lt;/span&gt;";
        formulaArray[index] = spanObj;
     }else{
      $(this).remove();
     };
    }
    $("#display").html(formulaArray);
  
  
    /*$("#display").html(result);*/
    /*var result = yourString.slice(1, -1);*/
    /*$("#display span").first().remove();*/
    }else{
      $("#display span").last().remove();
     }
   });
   $("#enterNum").keypress(function(e){
    if (e.which == 13) {
     debugger;
     var text = $("#enterNum").val();
     if (text != "") {
     $("#display").append("&lt;span contentEditable='false' class='numbers'&gt;"+ text + " " + "&lt;/span&gt;");
     /*onclick = 'makeItEdit()'*/
     $("#enterNum").val("");
      }else{
       alert("please enter some value....")
       return false;
      };
       }
   });
   $(".numbers").bind
   $(".braces").click(function(){
    debugger;
    var value= $(this).html();
    $("#display").append("&lt;span contentEditable='false'&gt;" + value + " " + "&lt;/span&gt;");
   });
   $(".wrapIn").click(function(){
    debugger;
    $("#display").html("&lt;span contentEditable='false' class='noClass'&gt;( " + $("#display").html() + ") "+ "&lt;/span&gt;");
   });
   $("#saveFormula").click(function(){
    debugger;
    var formulaForValidation = $.trim($("#display").text());
    alert("the formula created by u is ==" + formulaForValidation);
    var operatorsAtTheEnd = RegExp(/^[a-zA-Z0-9(]+(.*[a-zA-Z0-9%)])*$/).test(formulaForValidation);
    if (operatorsAtTheEnd == true) {
    formula = $("#display").text();
    console.log(formula);
    $("#display").html("");
    }else{
     alert("unfortunately the format you entered is incorrect");
     return false;
    }; 
   });
      
      $("#getFormula").click(function(){
    debugger;
    alert("formula received from server=="+"'"+formula+"'");
    var formulaArray = formula.split(" ");
    formulaArray.forEach(main);
    function main(arrayItem, index, array) {
     debugger;
     if (arrayItem == '(' || arrayItem == ')') {
      var bracesSpanObj = "&lt;span contentEditable='false'&gt;" + arrayItem+ " " + "&lt;/span&gt;";
      formulaArray[index] = bracesSpanObj;
     }
     else 
     if (arrayItem != "") {
        var spanObj = "&lt;span contentEditable='false' class='block'&gt;" + arrayItem+ " " + "&lt;/span&gt;";
        formulaArray[index] = spanObj;
     }else{
      $(this).remove();
     };
    }
    debugger;
    console.log("formulaArray ===== " +formulaArray);
    $("#display").html(formulaArray);
   });
   /*function makeItEdit(){
    debugger;
   $(".numbers").attr('contentEditable', true);
   }
      */
  
      $("#display").click(function(e) {
   debugger;
      var target = $(e.target), article;
   if(target.is('.numbers')) {
   $(".numbers").attr('contentEditable', true);
      return false;
      } else {
      $(".numbers").attr('contentEditable', false);
      return false;
      }
   })
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#display{
   padding: 5px;
   border:5px double #c38600;
   width: 682px;
   min-height: 110px;
   margin: 10px auto;
   font-weight: bold;
   font-size: 50px;
   border-radius: 15px;
   color: #abcdef;
   outline: none;
  }
  #input{
   border: 1 px solid white;
   width: 701px;
   min-height: 50px;
   margin: 5px auto;
  }
  #autofill{
   width: 500px;
   margin-left: 10PX;
   padding: 2px;
   padding-left: 10px;
   border: none;
   border-bottom: 1px solid green;
   font-size: 30px;
   color: #864566;
  }
  #autofill:focus{
   border: none;
   border-bottom: 1px solid green;
   outline: none;
  }
  label{
   font-size: 30px;
   color: #864566;
  }
  
  #operatorsBlock{
   width: 701px;
   height: 50px;
   border:5px double #c38600;
   margin: 5px auto;
   border-radius: 8px;
  
  /* padding: 10px;*/
  }
  #showPayTypes{
   font-size: 20px;
   width: 700px;
   height: 50px;
   border:5px double #c38600;
   margin: 10px auto;
   border-radius: 8px;
  
  }
  .operators, .braces, .wrapIn{
   border:1px solid rgba(70, 5, 26, 0.18);
   width: 9%;
   font-size: 25px;
   font-weight: bold;
   margin-top: 5px;
   margin-left: 6px;
   padding: 5px;
   display: inline-block;
   border-radius: 4px;
   text-align: center;
  }
  .block, .numbers{
   border:1px solid blue;
  /* width: 40px;
  */ font-size: 30px;
   font-weight: bold;
   margin: 5px;
   padding: 5px;
   display: inline-block;
   border-radius: 25px;
   text-align: center;
  }
  #functions{
      margin: 10px auto;
      height: 150px;
      width: 704px;
      border: 1px solid #ffffff;
  }
  button {
      font-size: 25px;
      height: 51px;
      color: #ffffff;
      background-color: black;
      margin-left: 27px;
  }
  #enterNum {
      width: 150px;
      height: 43px;
      font-size: 30px;
      margin-left: 9px;
      font-weight: bold;
      color: #610854;
  }
  #inputText{
   margin-top: 35px;
  }
  #getFormula{
   margin-top: 5px;
  }
  #wrapInBraces{
   display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="Functions.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="Styles.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="display" contentEditable="true"&gt;&lt;/div&gt;
  &lt;div id="input"&gt;
    &lt;form&gt;
     
    &lt;/form&gt;
     &lt;label for="autofill"&gt;Pay Type:&lt;input type="text" name="autofill" id="autofill" /&gt;&lt;/label&gt;
  &lt;/div&gt;
  &lt;div id="showPayTypes"&gt;&lt;/div&gt;
  &lt;div id="operatorsBlock"&gt;
   &lt;span style="margin-left: 10px"&gt;
    &lt;span class="operators" id="add"&gt;+&lt;/span&gt;
    &lt;span class="operators" id="substract"&gt;-&lt;/span&gt;
    &lt;span class="operators" id="divide"&gt;/&lt;/span&gt;
    &lt;span class="operators" id="multiply"&gt;*&lt;/span&gt;
    &lt;span class="operators" id="percentage"&gt;%&lt;/span&gt;
    &lt;span class="braces"&gt;(&lt;/span&gt;
    &lt;span class="braces"&gt;)&lt;/span&gt;
    &lt;span class="wrapIn" title="Insert formula in Braces"&gt;("")&lt;/span&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div id="functions"&gt;
   &lt;div id="buttons"&gt;
    &lt;input type="number" id="enterNum" placeholder="numbers here"&gt;
    &lt;button id="saveFormula"&gt;Save Formula&lt;/button&gt;
    &lt;button id="getFormula"&gt;Get Formula&lt;/button&gt;
    &lt;button id="delete"&gt;Delete&lt;/button&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- &lt;span id="wrapInBraces"&gt;&lt;/span&gt;
   --&gt;&lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>