<div class="game">
    <div class="game-container">
        <div class="game-board"></div>
        <div class="game-keyboard my-5">
            <div class="game-keyboard-row">
                <div tabindex="-1" role="button" class="game-keyboard-button">Q</div>
                <div tabindex="-1" role="button" class="game-keyboard-button">W</div>
                <div tabindex="-1" role="button" class="game-keyboard-button">E</div>
                <div tabindex="-1" role="button" class="game-keyboard-button">R</div>
                <div tabindex="-1" role="button" class="game-keyboard-button">T</div>
                <div tabindex="-1" role="button" class="game-keyboard-button letter-absent">Y</div>
                <div tabindex="-1" role="button" class="game-keyboard-button">U</div>
                <div tabindex="-1" role="button" class="game-keyboard-button">I</div>
                <div tabindex="-1" role="button" class="game-keyboard-button letter-absent">O</div>
                <div tabindex="-1" role="button" class="game-keyboard-button letter-elsewhere">P</div>
            </div>
            <div class="game-keyboard-row">
                <div tabindex="-1" role="button" class="game-keyboard-button">A</div>
                <div tabindex="-1" role="button" class="game-keyboard-button">S</div>
                <div tabindex="-1" role="button" class="game-keyboard-button">D</div>
                <div tabindex="-1" role="button" class="game-keyboard-button">F</div>
                <div tabindex="-1" role="button" class="game-keyboard-button">G</div>
                <div tabindex="-1" role="button" class="game-keyboard-button letter-absent">H</div>
                <div tabindex="-1" role="button" class="game-keyboard-button">J</div>
                <div tabindex="-1" role="button" class="game-keyboard-button">K</div>
                <div tabindex="-1" role="button" class="game-keyboard-button">L</div>
            </div>
            <div class="game-keyboard-row">
                <div tabindex="-1" role="button" class="game-keyboard-button game-keyboard-button-wide">Enter</div>
                <div tabindex="-1" role="button" class="game-keyboard-button">Z</div>
                <div tabindex="-1" role="button" class="game-keyboard-button">X</div>
                <div tabindex="-1" role="button" class="game-keyboard-button">C</div>
                <div tabindex="-1" role="button" class="game-keyboard-button">V</div>
                <div tabindex="-1" role="button" class="game-keyboard-button">B</div>
                <div tabindex="-1" role="button" class="game-keyboard-button letter-absent">N</div>
                <div tabindex="-1" role="button" class="game-keyboard-button">M</div>
                <div tabindex="-1" role="button" class="game-keyboard-button game-keyboard-button-wide">⌫</div>
            </div>

        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script>
    let rowLetter = document.getElementsByClassName("row-letter")
    rowLetter[0].focus()
    $(document).on('keypress', 'input', function (e) {
        if (e.which === 32) {
            e.preventDefault();
            var $next = $('[tabIndex=' + (+this.tabIndex + 1) + ']');

            if (!$next.length) {
                $next = $('[tabIndex=1]');
            }
            $next.focus().click();
        }
    });


    function move(first, last) {
        if (first.value.length) {
            document.getElementById(last).focus()
        }
    }
</script>