JSFiddle - React, Tailwind, and code Playground

by Eric Howe

HTML

<form>
    <input tabindex="1"/>
    <input tabindex="2"/>
    <input tabindex="3"/>
    <div>
        <input tabindex="4"/>
        <input tabindex="5"/>
        <input tabindex="6"/>
        <input tabindex="7"/>
    </div>
</form>

<hr>

<button id="a">Start at the end</button>
<button id="b">Start in the middle</button>

CSS

.start-here {
    background: #0f0;
}

JavaScript

function do_things() {
    $('.start-here').focus();
    var next_idx = parseInt($(':focus').attr('tabindex'), 10) + 1;
    var $next_input = $('form [tabindex=' + next_idx + ']');
    if($next_input.length)
        $next_input.focus();
    else
        $('form [tabindex]:first').focus();
}

$('#a').click(function() {
    $('.start-here').removeClass('start-here');
    $('form :input:last').addClass('start-here');
    do_things();
});
$('#b').click(function() {
    $('.start-here').removeClass('start-here');
    $('form :input:eq(3)').addClass('start-here');
    do_things();
});