JSFiddle - React, Tailwind, and code Playground

HTML

<button id="bt1">Item 1</button>
<button id="bt2">Item 2</button>
    
<div><span>0</span> button #1 clicks.</div>
<div><span>0</span> button #2 clicks.</div>

CSS

button.selected {background:yellow}

JavaScript

var li = $('button');
var liSelected;
$(window).keydown(function(e){
    if(e.which === 40){
        if(liSelected){
            liSelected.removeClass('selected');
            next = liSelected.next();
            if(next.length > 0){
                liSelected = next.addClass('selected');
            }else{
                liSelected = li.eq(0).addClass('selected');
            }
        }else{
            liSelected = li.eq(0).addClass('selected');
        }
    }else if(e.which === 38){
        if(liSelected){
            liSelected.removeClass('selected');
            next = liSelected.prev();
            next.focus();
            if(next.length > 0){
                liSelected = next.addClass('selected');
            }else{
                liSelected = li.last().addClass('selected');
            }
        }else{
            liSelected = li.last().addClass('selected');
        }
    }
    liSelected.trigger('focus');
});

$("button:eq(0)").click(function () {
   update($("span:first"));
});
$("button:eq(1)").click(function () {
   update($("span:last"));
});
 
function update(j) {
var n = parseInt(j.text(), 10);
j.text(n + 1);
}