JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rowfield_collection">
    <input id="rowfield1" class="rowfield top" onkeydown="rowfieldkeynav(event, undefined, 'rowfield2');" type="text" size="35" maxlength="30" />
    <input id="rowfield2" class="rowfield middle" onkeydown="rowfieldkeynav(event, 'rowfield1', 'rowfield3');" type="text" size="35" maxlength="30" />
    <input id="rowfield3" class="rowfield middle" onkeydown="rowfieldkeynav(event, 'rowfield2', 'rowfield4');" type="text" size="35" maxlength="30" />
    <input id="rowfield4" class="rowfield bottom" onkeydown="rowfieldkeynav(event, 'rowfield3', undefined);" type="text" size="35" maxlength="30" />
</div>

CSS

.rowfield {
    margin: 0 0 -1px 0;
    display: block;
}
.rowfield.top {
    border-bottom: 0;
}
.rowfield.middle {
    border-top: 0;
    border-bottom: 0;
}
.rowfield.bottom {
    border-top: 0;
}

JavaScript

function rowfieldkeynav(e, before_id, after_id) {
    var evtobj = window.event ? event : e //distinguish between IE's explicit event object (window.event) and Firefox's implicit.
    var unicode = evtobj.charCode ? evtobj.charCode : evtobj.keyCode;
    if(before_id != undefined && e.currentTarget.value.length == 0 && unicode == 08) { // BACKSPACE
        document.getElementById(before_id).focus();
    }
    else if(after_id != undefined && unicode == 13 || e.currentTarget.value.length >= e.currentTarget.maxLength) { // ENTER or end of row reached
        document.getElementById(after_id).focus();
    }
}