JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id='myText' cols="40" rows="10">Apples are sweet</textarea>
<div id="Keyboard">
  <input type="button" onclick='writeL(this.value)' value="1" />
  <input type="button" onclick='writeL(this.value)' value="2" />
  <input type="button" onclick='writeL(this.value)' value="3" />
  <input type="button" onclick='writeL(this.value)' value="4" />
  <input type="button" onclick='writeL(this.value)' value="5" />
  <input type="button" onclick='writeL(this.value)' value="6" />
  <input type="button" onclick='writeL(this.value)' value="7" />
  <input type="button" onclick='writeL(this.value)' value="8" />
  <input type="button" onclick='writeL(this.value)' value="9" />
  <input type="button" value="&gt;&gt;" title="Move Fwd" id="moveFwd">
  <input type="button" value="&lt;&lt;" title="Move Bkwd" id="moveBkwd">
</div>

<button id="del">del</button>
<input type="button" id="bold" value="B" />
<input type="button" id="italic" value="I" />
<input type="button" id="moveBack" value="&lt;" />

<textarea name="myText" id="myText" cols="55" rows="4">Free JavaScript and jQuery Courses, tutorials</textarea>

JavaScript

document.getElementById('del').addEventListener('click', deleteit);

function deleteit() {
  var myText = document.getElementById("myText");
  var myTextValue = myText.value;
  //var newString = myTextValue.substr(0, (myTextValue.length - 1));
  var currentStart;
  var currentEnd;
  var start = myText.selectionStart;
  var end = myText.selectionEnd;
  //alert(start)
  console.log('Start= ' + start + ' End= ' + end);
    var partOne = myText.value.substring(0, start )
    var partTwo = myText.value.substring(end);

 if (start === end) {//working//
    myText.value = myTextValue.substring(0, partOne.length - 1) + partTwo;
    currentStart = end;
    currentEnd = start- 1  // end;
    myText.focus();
  } //end if   

   if (end>start){ 
    console.log('start '+start)
    
    console.log('end '+end)
   myText.value = myTextValue.substring(0, partOne.length ) + myTextValue.substring(0, partTwo.length);  
     myText.focus();
    currentStart = end;
    currentEnd = start  // end;
    console.log('start after '+start)
    console.log('end after '+end)
  /*
  //start=0;
    var partOne = myText.value.substring(0, start)
    var partTwo = myText.value.substring(end);
    //end=myText.selectionStart;
    myText.value = myTextValue.substring(0, partOne.length - 1) + partTwo;
   
    //currentStart = myText.selectionStart = start -1//-1;
    //currentEnd = myText.selectionEnd=end-1//-1
     start=myText.selectionStart ;
     end=myText.selectionEnd;
     */ 
  } 
  
  console.log('currentStart ' + currentStart + ' currentEnd ' + currentEnd);
  myText.selectionStart = currentStart ;
  myText.selectionEnd = currentEnd ;
  console.log('selectionStart ' + myText.selectionStart + ' selectionEnd ' + myText.selectionEnd);
  
  console.log('Start= ' + start + ' End= ' + end);
}
document.getElementById('moveBack').addEventListener('click', moveBack);

function moveBack() {
  var myText = document.getElementById("myText");
  var myTextValue = myText.value;
  //var newString =...