JSFiddle - React, Tailwind, and code Playground

HTML

<div>
        <input type="text" />
        <ul id="sbOptions_54514054" class="sbOptions" style="">
            <li><a href="#-1" rel="-1">--Select one--</a></li>
            <li><a href="#2" rel="2">Windows</a></li>
            <li><a href="#1" rel="1">Siding</a></li>
            <li><a href="#7" rel="7">Roofing</a></li>
        </ul>
    </div>

CSS

.selected {
    background: #faa;
}

JavaScript

var chosen = "";
$(document).keydown(function(e){ // 38-up, 40-down
    if (e.keyCode == 40) { 
        if(chosen === "") {
            chosen = 0;
        } else if((chosen+1) < $('li').length) {
            chosen++; 
        }
        $('li').removeClass('selected');
        $('li:eq('+chosen+')').addClass('selected');
        return false;
    }
    if (e.keyCode == 38) { 
        if(chosen === "") {
            chosen = 0;
        } else if(chosen > 0) {
            chosen--;            
        }
        $('li').removeClass('selected');
        $('li:eq('+chosen+')').addClass('selected');
        return false;
    }
});