JSFiddle - React, Tailwind, and code Playground

HTML

<span id='scrollInfo'>scrollTop: 0</span>
<div id="containerList">
    <ul id="orderList">
        <li> Test 1 </li> 
        <li> Test 2 </li> 
        <li> Test 3 </li> 
        <li> Test 4 </li> 
        <li> Test 5 </li> 
        <li> Test 6 </li> 
        <li> Test 7 </li> 
        <li> Test 8 </li> 
        <li> Test 9 </li> 
        <li> Test 1 </li> 
        <li> Test 2 </li> 
        <li> Test 3 </li> 
        <li> Test 4 </li> 
        <li> Test 5 </li> 
        <li> Test 6 </li> 
        <li> Test 7 </li> 
        <li> Test 8 </li> 
        <li> Test 9 </li> 
        <li> Test 1 </li> 
        <li> Test 2 </li> 
        <li> Test 3 </li> 
        <li> Test 4 </li> 
        <li> Test 5 </li> 
        <li> Test 6 </li> 
        <li> Test 7 </li> 
        <li> Test 8 </li> 
        <li> Test 9 </li>         <li> Test 1 </li> 
        <li> Test 2 </li> 
        <li> Test 3 </li> 
        <li> Test 4 </li> 
        <li> Test 5 </li> 
        <li> Test 6 </li> 
        <li> Test 7 </li> 
        <li> Test 8 </li> 
        <li> Test 9 </li>         <li> Test 1 </li> 
        <li> Test 2 </li> 
        <li> Test 3 </li> 
        <li> Test 4 </li> 
        <li> Test 5 </li> 
        <li> Test 6 </li> 
        <li> Test 7 </li> 
        <li> Test 8 </li> 
        <li> Test 9 </li>         <li> Test 1 </li> 
        <li> Test 2 </li> 
        <li> Test 3 </li> 
        <li> Test 4 </li> 
        <li> Test 5 </li> 
        <li> Test 6 </li> 
        <li> Test 7 </li> 
        <li> Test 8 </li> 
        <li> Test 9 </li>         <li> Test 1 </li> 
        <li> Test 2 </li> 
        <li> Test 3 </li> 
        <li> Test 4 </li> 
        <li> Test 5 </li> 
        <li> Test 6 </li> 
        <li> Test 7 </li> 
        <li> Test 8 </li> 
        <li> Test 9 </li>         <li> Test 1 </li> 
        <li> Test 2 </li> 
        <li> Test 3 </li> 
        <li> Test 4 </li> 
        <li> Test 5 </li> 
        <li> Test 6 </li> 
        <li> Test 7 </li> 
        <li> Test 8...

CSS

.hoverColor
{
    background-color:#408080;
    color:white;
}
li
{
    list-style-type:none;
    list-style-position:inside;
    text-align: left;
    margin-left: 8px;
    padding: 0px
}
div
{
    overflow-y: scroll;
    overflow-x: hidden;
    width: 200px;
    height: 300px;
}

JavaScript

$('li').hover(function() {
    j = $(this).parents("ul").find("li").index($(this));
    $('.hoverColor').removeClass('hoverColor');
    $(this).addClass('hoverColor');
});
j = -1;
$(document).keyup(function(e) {
    var str = "";
    var update = false;
    var el;
    $("li").removeClass('hoverColor');
    if (e.keyCode == 38) // The Up arrow key 
    {
        if (--j < 0) {
            j = 0;
        }
        update = true;
    }
    else if (e.keyCode == 40) {
        if (++j > $("li", "ul").length - 1) {
            j = $("li", "ul").length - 1;
        }
        update = true;
    }
    if (update) {
        el = $("li", "ul").eq(j);
        el.addClass('hoverColor');
        str = el.text();
        $("#textArea").insertAtCaret(str);
        var tmp = (el.height() == 20) ? 5 : 1.5;
        $('#containerList').scrollTop((j) * (300 / el.height()+tmp));
        //$('#scrollInfo').html('scrollTop: ' + $('#containerList').scrollTop());
        $('#scrollInfo').html(
            'innerheight: ' + (el.innerHeight()) + ' ' +
            'height: ' + el.css('height')  + ' ' +
            'scrollHeight: ' + el.attr('scrollHeight') + ' ' +
            'paddingTop: ' + el.css('paddingTop')  + ' ' +
            'paddingBottom: ' + el.css('paddingBottom')
        );
    }
});

$.fn.insertAtCaret = function(tagName) {
    return this.each(function() {
        if (document.selection) {
            //IE support
            this.focus();
            sel = document.selection.createRange();
            sel.text = tagName;
            this.focus();
        } else if (this.selectionStart || this.selectionStart == '0') {
            //MOZILLA/NETSCAPE support
            startPos = this.selectionStart;
            endPos = this.selectionEnd;
            scrollTop = this.scrollTop;
            this.value = this.value.substring(0, startPos) + tagName + this.value.substring(endPos, this.value.length);
            this.focus();
            this.selectionStart = startPos +...