JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div class="btn-group"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
	    Inch
	</a>

    <ul class="dropdown-menu">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
    </ul>
</div>

CSS

ul {
    list-style-type:none;
    max-height:160px;
    padding-top:10px;
    overflow:auto;
    text-align:center;
}
ul li {
    height:24px;
    line-height:24px;
}
.selected {
    background:#ff0000;
    color:#fff;
}

JavaScript

// scrollTo plugin 
$.fn.scrollTo = function (target, options, callback) {
    if (typeof options == 'function' && arguments.length == 2) {
        callback = options;
        options = target;
    }
    var settings = $.extend({
        scrollTarget: target,
        offsetTop: 100,
        duration: 0,
        easing: 'linear'
    }, options);
    return this.each(function () {
        var scrollPane = $(this);
        var scrollTarget = (typeof settings.scrollTarget == "number") ? settings.scrollTarget : $(settings.scrollTarget);
        var scrollY = (typeof scrollTarget == "number") ? scrollTarget : scrollTarget.offset().top + scrollPane.scrollTop() - parseInt(settings.offsetTop);
        scrollPane.animate({
            scrollTop: scrollY
        }, parseInt(settings.duration), settings.easing, function () {
            if (typeof callback == 'function') {
                callback.call(this);
            }
        });
    });
}


//My code
//The function that is listing the the mouse

function mousemove() {
    console.log('mousie')
    jQuery(".btn-group .dropdown-menu li").removeClass('selected');
    jQuery(this).addClass('selected');
}

var mousemoved = false;

jQuery(document).mousemove(function () {
    if (!mousemoved) {
        $('.btn-group .dropdown-menu li').mousemove(mousemove);
        mousemoved = true;
    }
})

//What to do when the keyboard is pressed
jQuery(".btn-group").keydown(function (e) {

    $('.btn-group .dropdown-menu li').off('mousemove');
    mousemoved = false;

    if (e.keyCode == 38) { // up
        console.log('keyup pressed');
        var selected = jQuery('.selected');
        jQuery(".btn-group .dropdown-menu li").removeClass('selected');
        if (selected.prev().length == 0) {
            selected.siblings().last().addClass('selected');
        } else {
            selected.prev().addClass('selected');
            jQuery('.btn-group .dropdown-menu').scrollTo('.selected');
        }
    }
    if (e.keyCode == 40) { //...