JSFiddle - React, Tailwind, and code Playground

by mathzarro

HTML

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

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();
            $("button:first").trigger('focus');
            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();
            $("button:first").trigger('focus');
            if(next.length > 0){
                liSelected = next.addClass('selected');
            }else{
                liSelected = li.last().addClass('selected');
            }
        }else{
            liSelected = li.last().addClass('selected');
        }
    }
});

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