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(){
$("input[type=text]").keyup(function(e){
if(e.keyCode == "13")
{
var nextIndex = $(this).prop('tabindex') + 1;
$('[tabindex=' + nextIndex + ']').focus();
}
});
$("form").submit(function(){
return false;
});
});