JSFiddle - React, Tailwind, and code Playground

HTML

<input tabindex="1" value="tab-index: 1;" />
<input tabindex="6" value="tab-index: 6;" />
<input tabindex="2" value="tab-index: 2;" />
<input tabindex="3" value="tab-index: 3;" />
<input tabindex="8" value="tab-index: 8;" />
<input tabindex="4" value="tab-index: 4;" />
<input tabindex="5" value="tab-index: 5;" />
<input tabindex="7" value="tab-index: 7;" />
<input tabindex="9" value="tab-index: 9;" />

CSS

input {
    padding: 10px;
    margin: 10px;
    background: #023838;
    display: block;
    width: 175px;
    border-radius: 100px;
    border: 2px solid #199999;
    
    font-weight: bold;
    color: #fff;
    font-family: monospace;
}

input:focus {
    border-color: red;
}

JavaScript

jQuery.expr[':'].tabIndexAbove = function(elem, index, match) {
    return +elem.getAttribute('tabindex') > match[3];
};

$('input:tabIndexAbove(4)').css('background', 'teal');