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:
            var is = isEndOrStartOfText($this);               
            if(is)
            {   e.preventDefault();
                if($('#'+previous_id).length > 0)
                {
                    $('#'+previous_id).focus();
                }
            }
            break;                
        case 39:
            var is = isEndOrStartOfText($this);
            if(is)
            {
                e.preventDefault();
                if($('#'+next_id).length > 0)
                {
                    $('#'+next_id).focus();
                }
            }
            break;
        default:
            break;
        } 
               
    });
    
    function isEndOrStartOfText($this)
    {
        return true;
        // @todo calculate here
    }  
});