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($this[0].selectionStart === 0)
            {   e.preventDefault();
                if($('#'+previous_id).length > 0)
                {
                    $('#'+previous_id).focus();
                }
            }
            break;                
        case 39:
            if($this[0].selectionStart === $this.val().length)
            {
                e.preventDefault();
                if($('#'+next_id).length > 0)
                {
                    $('#'+next_id).focus();
                }
            }
            break;
        default:
            break;
        } 
               
    }); 
});