JSFiddle - React, Tailwind, and code Playground

HTML

<h2 contenteditable="true" id="before">Click here and Press Tab.</h2><br/><br/>
<div contenteditable="true" id="editable">
  <p id="test">Test</p>
</div>

JavaScript

$( "#test" ).focus(function() {
  $( "<span>Focused!</span>" ).appendTo( "body" ).fadeOut( 1000 );
});

$("#before").on('keydown', function(e){
    	    if(e.which == 9){
    	    	$('#test').triggerHandler('focus');
    	    }
    	    
    	});

$("#test").bind( "focus", function() {
   $("#test").css('background', 'yellow');	
   setCaret();
});


function setCaret() {
    console.log("getting element");
    var p = document.getElementById("test");
    console.log("focusing element");
    p.focus();
    console.log("creating range");
    var range = document.createRange();
    console.log("getting selection");
    var sel = window.getSelection();
    console.log("setting range start");
    range.setStart(p, 0);
    console.log("collapsing range");
    range.collapse(true);
    console.log("removing all ranges");
    sel.removeAllRanges();
    console.log("adding range");
    sel.addRange(range);
}