JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <input name="split1" id="1" type="text" class="box"/>
    <input name="split2" id="2" type="text" class="box"/>
    <input name="split2" id="3" type="text" class="box"/>
</div>

CSS

#wrapper {
    white-space: nowrap;
    width: 1500px;
}

JavaScript

$(function() {       
    $('.box').keydown(function(e) {
        
        var $this       = $(this),
            id          = $this.attr('id'),
            next_id     = parseInt(id, 10) + 1,
            previous_id = parseInt(id, 10) - 1;
        switch (e.keyCode) {
        case 37:            
            if(getCursorPosition($this) == 0)
            {   e.preventDefault();
                if($('#'+previous_id).length > 0)
                {
                    $('#'+previous_id).focus();
                }
            }
            break;                
        case 39:
            
            if(getCursorPosition($this) == $this.val().length)
            {
                e.preventDefault();
                if($('#'+next_id).length > 0)
                {
                    $('#'+next_id).focus();
                }
            }
            break;
        default:
            break;
        } 
               
    });
          
    function getCursorPosition(jqueryItem) {
    var input = jqueryItem.get(0);
    if (!input) return; // No (input) element found
    if ('selectionStart' in input) {
        // Standard-compliant browsers
        return input.selectionStart;
    } else if (document.selection) {
        // IE
        input.focus();
        var sel = document.selection.createRange();
        var selLen = document.selection.createRange().text.length;
        sel.moveStart('character', -input.value.length);
        $("#sel").html(sel);
        $("#selLen").html(selLen);
        return sel.text.length - selLen;
    }
}
});