what I want to accomplish is to find a way to make it so if the contenteditable div already has one character, it immediately advances to the next div box on the website I am trying to create. I am trying to create a wordle-type game, and I cannot figure this out. I apologize if the following code looks a bit messy, I just started this project.

Here is my HTML code:

<div class="container" style = "position:relative; left:825px; top:-400px;">

 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>

</input>

<div class = "back-space">

    <button class = "key-button" id = "DEL">DEL</button>

</div>
 <div class="first-lane">
    <button class="key-button" value="Q">Q</button>
    <button class="key-button" value="W">W</button>
    <button class="key-button" value="E">E</button>
    <button class="key-button" value="R">R</button>
    <button class="key-button" value="T">T</button>
    <button class="key-button" value="Y">Y</button>
    <button class="key-button" value="U">U</button>
    <button class="key-button" value="I">I</button>
    <button class="key-button" value="O">O</button>
    <button class="key-button" value="P">P</button>
</div>

<div class="second-lane">
    <button class="key-button" value="A">A</button>
    <button class="key-button" value="S">S</button>
    <button class="key-button" value="D">D</button>
    <button class="key-button" value="F">F</button>
    <button class="key-button" value="G">G</button>
    <button class="key-button" value="H">H</button>
    <button class="key-button" value="J">J</button>
    <button class="key-button" value="K">K</button>
    <button class="key-button" value="L">L</button>
    <button class="key-button" value="P">P</button>
    <button class="key-button" value="&nbsp;">ENTER</button>
</div>
<div class="third-lane">
    <button class="key-button" value="Z">Z</button>
    <button class="key-button" value="X">X</button>
    <button class="key-button" value="C">C</button>
    <button class="key-button" value="V">V</button>
    <button class="key-button" value="B">B</button>
    <button class="key-button" value="N">N</button>
    <button class="key-button" value="M">M</button>
</div>

Here is my Javascript code, which it what I have tried but failed:

$('div[type="contenteditable"]').keyup(function(e) {
    if(e.keyCode == 13) {
        $(this).next().focus();
    }
});

Thank you