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="#">
	    Size
        <span class="caret"></span>
        <span class="valueOfButton">All</span>
	</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;
}

.btn.dropdown-toggle{
	width: 135px;
	height: 60px;
	padding-top: 40px;
	border-radius: 0px;
	font-weight: bold;
	font-size: 20px;	
}

.btn .caret{
	margin-top:8px;
}

.valueOfButton{
	display: block;	
	font-size: 14px;
}

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     : 185,
    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
jQuery(".btn-group .dropdown-menu li").mouseover(function() {
		console.log('mousie')
	    jQuery(".btn-group .dropdown-menu li").removeClass('selected');
	    jQuery(this).addClass('selected');
})	


// if the li item is clicked display the value inside the button
jQuery('.dropdown-menu li ').click(function() {

        //select the span where we want the place te value
        console.log(jQuery(this).parent().parent().parent() );
        jQuery(this).parent().parent().parent().find('.valueOfButton')

        //get the html we want to place in the span and fill the div .valueOfButton
        .html(jQuery(this).text()); 

        //populate the hidden form input element
 jQuery(this).parent().parent().parent().find('input').val(jQuery(this).data('key'));

});


//What to do when the keyboard is pressed
jQuery(".btn-group").keydown(function(e) {
    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) {
          ...