JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/dark-hive/jquery-ui.css">
<ul id="dID-list" class="ui-selectmenu-list shadow border ui-corner-all ui-widget-content" style="width: 250px; max-height: 300px; visibility: visible;">
    <li class="group">
        <div class="ui-widget-header">future</div>
        <ul>
            
            <li class="pub-4 future" data-value="86">86 | 10 February 2011</li>
            <li class="pub-4 future" data-value="75">75 | 06 January 2011</li>
            <li class="ui-state-active pub-4 future" data-value="74">74 | 30 December 2010</li>
        </ul>
    </li>
    <li class="group">
        <div class="ui-widget-header">past</div>
        <ul>
            <li class="pub-4 past" data-value="73">73 | 23 December 2010</li>
            <li class="pub-4 past" data-value="72">72 | 16 December 2010</li>
            <li class="pub-4 past" data-value="71">71 | 09 December 2010</li>
        </ul>
    </li>
</ul>

JavaScript

$("ul li ul li").bind("mouseenter",function(){
                    $(this).addClass("ui-state-hover");    
                })
                .bind("mouseleave",function(){
                    $(this).removeClass("ui-state-hover");    
                });