JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <button>Item 1</button>
    <button>Item 2</button>
    <button>Item 3</button>    
    
    <div ><span>0</span> button #1 clicks.</div>
    <div ><span>0</span> button #2 clicks.</div>
    <div ><span>0</span> button #3 clicks.</div>
</ul>

CSS

button:focus {background:yellow}

JavaScript

var buttons =  $('button');
var spans = $('span');

buttons.click(function(e){
    var span = $(spans[Array.prototype.indexOf.call(buttons, document.activeElement)]);
    span.text(parseInt(span.text(), 10) + 1);
});

$(window).keydown(function(e){
    var isLeft = e.which === 38 || e.which === 37, 
        isRight = e.which === 40 || e.which === 39;
    if(isLeft || isRight){
        var currentButtonIndex =  Array.prototype.indexOf.call(buttons, document.activeElement);
        var nextButtonIndex;
        if (currentButtonIndex === -1) {
            nextButtonIndex = 0;
        } else {
            var toAdd = isLeft ? -1 : 1;
            nextButtonIndex = (currentButtonIndex + toAdd + buttons.length) % buttons.length;
        }
        buttons[nextButtonIndex].focus();
    }
});