JSFiddle - React, Tailwind, and code Playground

HTML

<form id="a">
    <input type="text">
    <input type="text">
</form>

<form id="b">
    <input type="text">
    <input type="text">
</form>
        
<form id="c">
    <input type="text">
    <input type="text">
</form>

CSS

form { background: #EEE; margin-bottom: 20px; padding: 20px; }

JavaScript

var $allInputs = $("input"),
    numInputs = $allInputs.length;

// Update the tab indexes when an input is focused.
$("form").on("focus", "input", function() {
    var $activeForm = $(this).closest("form"),
        $activeFormInputs = $activeForm.find("input");

    // Make the inputs on all inactive forms negative.
    $.each($allInputs, function(i) {
        var $parentForm = $(this).closest("form");

        if ($parentForm != $activeForm) {
            $(this).attr("tabindex", -(numInputs - i));
            $(this).val(-(numInputs - i));
        }
    });

    // This form is active; use positive tab indexes.
    $.each($activeFormInputs, function(i) {
        $(this).attr("tabindex", ++i);
        $(this).val(i)
    });   
});

// Focus the first input.
$("#a").find("input").first().focus();