JSFiddle - React, Tailwind, and code Playground

HTML

<input id="txtSearch" type="text" /> <span id="openclose">&#9660;</span>

<div id="divSearchContent">
    <ul id="ulSearch" class="buttons">
        <li>Compt0003</li>
        <li>Compt0004</li>
        <li>Compt0005</li>
        <li>Compt0006</li>
        <li>Compt0007</li>
        <li>Compt0008</li>
        <li>Compt0009</li>
        <li>Compt0010</li>
        <li>Compt0011</li>
        <li>Compt0012</li>
        <li>Compt0013</li>
        <li>Compt0014</li>
        <li>Compt0015</li>
        <li>Compt0016</li>
        <li>Compt0017</li>
    </ul>
</div>

CSS

#divSearchContent {
    height: 80px;
    width:30%;
    overflow-y: scroll;
    position:relative;
}
#ulSearch {
    list-style-type:none;
    padding-left:0;
    font-size: 12px;
}
#openclose {
    cursor:pointer;
}
#ulSearch li.activeChoice {
    background-color:red;
    color:white;
    font-weight:bold;
}

JavaScript

$(function () {
    var liPossition = 0;
    var items = $("#ulSearch li");
    var divSearchContent = $("#divSearchContent");
    divSearchContent.hide();
    $("#txtSearch,#ulSearch").keydown(function (e) {
        if (e.keyCode == 13) { // if enter pressed
            divSearchContent.hide();
            return;
        }
        if (e.keyCode != 38 && e.keyCode != 40) { // // if not up or down arrow
            return;
        }
        if (divSearchContent.is(':hidden')) {
            items.eq(liPossition).addClass("activeChoice");
            divSearchContent.show();
            return;
        }
        items.eq(liPossition).removeClass("activeChoice");
        if (e.keyCode == 40 && liPossition < items.length - 1) { // down arrow key code
            liPossition++;
        }
        if (e.keyCode == 38 && liPossition > 0) { // up arrow key code
            liPossition--;
        }
        $("#txtSearch").val(items.eq(liPossition).text());
        items.eq(liPossition).addClass("activeChoice");
        var b1 = divSearchContent[0].getBoundingClientRect();
        var b2 = items.eq(liPossition)[0].getBoundingClientRect();
        if (b1.top > b2.top) {
            divSearchContent.scrollTop(divSearchContent.scrollTop() - b1.top + b2.top);
        } else if (b1.bottom < b2.bottom) {
            divSearchContent.scrollTop(divSearchContent.scrollTop() - b1.bottom + b2.bottom);
        }
        //console.log(b1.top, b2.top, b1.bottom, b2.bottom);
    });
    items.click(function () {
        $("#txtSearch").val($(this).text());
        var self = this;
        items.eq(liPossition).removeClass("activeChoice");
        items.each(function (i) {
            if (this == self) {
                liPossition = i;
            }
        });
        items.eq(liPossition).addClass("activeChoice");
        $("#txtSearch").focus();
    });
    $("#openclose").click(function () {
        divSearchContent.toggle();
        items.eq(liPossition).addClass("activeChoice");
   ...