JSFiddle - React, Tailwind, and code Playground
HTML
<form action="">
<input tabindex="1" id="left_1" type="text" placeholder="on enter, tab to center_1" />
<input tabindex="2" id="center_1" type="text" placeholder="enter=tab to right_1" />
<input tabindex="3" id="right_1" type="text" placeholder="on enter, tab to left_2" />
<select id="dd_1">
<option value="1">1</option>
<option value="2">1</option>
</select>
<p>
<input tabindex="4" id="left_2" type="text" placeholder="left_2" />
<input tabindex="5" id="center_2" type="text" />
<input tabindex="6" id="right_2" type="text" />
<select id="dd_2">
<option value="1">1</option>
<option value="2">1</option>
</select>
</p>
<input type="submit" class="btn btn-primary" value="Submit">
</form>
JavaScript
$(function () {
$("form :input").on("keypress", function (e) {
var nextIndex = $(this).prop('tabindex') + 1;
$('[tabindex=' + nextIndex + ']').focus();
return e.keyCode != 13;
});
});