JSFiddle - React, Tailwind, and code Playground

HTML

First click here and use tab to cycle through elements.  Then focus on first element of cycle and press 'z' to simulate tabbing in same order.
<br>
<form>
    <input id="third" type="text" value="THIRD" />
    <div>Hi</div>
    <input id="second" type="button" tabIndex="32" value="SECOND" />
    <div>
        <span>hey</span>
        <textarea id="fourth">FOURTH</textarea>
        <input id="skip1" type="text" disabled />
    </div>
    <select id="first" tabIndex="17"><option>FIRST</option></select>
    <input id="skip2" type="hidden" />
    <p>what</p>
    <input id="fifth" type="submit" value="FIFTH" />
</form>

JavaScript

$(':input').keypress(function(e){ 
    if (e.which == 122) {
        if (!this.form.tabOrder) {
            var els = this.form.elements,
                ti = [],
                rest = [];
            for (var i = 0, il = els.length; i < il; i++) {
                if (els[i].tabIndex > 0 &&
                    !els[i].disabled && 
                    !els[i].hidden && 
                    !els[i].readOnly &&
                    els[i].type !== 'hidden') {
                    ti.push(els[i]);
                }
            }
            ti.sort(function(a,b){ return a.tabIndex - b.tabIndex; });
            for (i = 0, il = els.length; i < il; i++) {
                if (els[i].tabIndex == 0 &&
                    !els[i].disabled && 
                    !els[i].hidden && 
                    !els[i].readOnly &&
                    els[i].type !== 'hidden') {
                    rest.push(els[i]);
                }
            }
            this.form.tabOrder = ti.concat(rest);
        }
        for (var j = 0, jl = this.form.tabOrder.length; j < jl; j++) {
            if (this === this.form.tabOrder[j]) {
                if (j+1 < jl) {
                    $(this.form.tabOrder[j+1]).focus();
                } else {
                    $(this).blur();
                }
            }
        }
    }
});