JSFiddle - React, Tailwind, and code Playground

HTML

<form style="background-color: red" data-tabgroup>
  <input tabindex="01" />
  <input tabindex="02" />
  <input tabindex="03" />
</form>

<form style="background-color: blue" data-tabgroup>
  <input tabindex="01" />
  <input tabindex="02" />
  <input tabindex="03" />
</form>

JavaScript

var tabgroups = document.querySelectorAll("[data-tabgroup]");
for (var i = 0; i < tabgroups.length; i++) {
  var inputs = tabgroups[i].querySelectorAll("[tabindex]");
  for (var j = 0; j < inputs.length; j++) {
    inputs[j].addEventListener("keydown", function(myIndex, inputs, e) {
      if (e.key === "Tab") {
        e.preventDefault();
        if (inputs[myIndex + 1]) {
          inputs[myIndex + 1].focus();
        } else {
          inputs[0].focus();
        }
      }
    }.bind(null, j, inputs))
  }
}