JSFiddle - React, Tailwind, and code Playground

HTML

<div id = 'main'>
    <div id = 'n1' contenteditable=true> Content one</div>
    <div id = 'n2' contenteditable=true> Content 2</div>
    <div id = 'n3' contenteditable=true> Content 3</div>
    <div id = 'n4' contenteditable=true> Content 4</div>
</div>

JavaScript

$('#main div').keydown(function(){
    if(!$(this).text().trim()){
        $(this).prev().focus();
        setCursorToEnd(getPrevSib(this));
    }
});

function setCursorToEnd(ele){
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(ele, 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
}

function getPrevSib(n){
    //gets prev sibling excl whitespace || text nodes
    var x=n.previousSibling;
    while (x && x.nodeType!=1){
          x=x.previousSibling;
    }
    return x;
}