JSFiddle - React, Tailwind, and code Playground

HTML

<dl id="reqtype" class="select">Fruits
        <dt><a href="#"><span data-val=""></span></a></dt>
        <dd>
            <ul>
                <li><a data-val="" href="#">&nbsp;</a></li>
					<span class="header-list">- List -</span>
                <li><a data-val="apples" href="#">Apples</a></li>
                <li><a data-val="Bananas" href="#">Bananas</a></li>
                <li><a data-val="Oranges" href="#">Oranges</a></li>
            </ul>
        </dd>
    </dl>
    
    <br><br>
    
    <dl id="action" class="select">Status
        <dt><a href="#"><span data-val=""></span></a></dt>
        <dd>
            <ul>
                <li><a data-val="" href="#">&nbsp;</a></li>
                <li><a data-val="ACTIVE" href="#">ACTIVE</a></li>
                <li><a data-val="ON HOLD" href="#">ON HOLD</a></li>
                <li><a data-val="CLOSED" href="#">CLOSED</a></li>
            </ul>
        </dd>
    </dl>

CSS

* {
	font-family: Segoe UI;
	font-size: 9pt;
}
.select dd, .select dt, .select ul {
	margin: 0px;
	padding: 0px;
}
.select dd {
	position: relative;
}
.select a, .select a:visited {
	color: #000;
	text-decoration: none;
	outline: none;
}
.select dt a:hover, .select dt a:focus {
	/*border: 1px solid red; */
}
.select dd ul li a:hover {
	background-color: rgb(112,146,190);
	color: #FFF;
}
       
.select dt a {
	background: url(arrow.png) no-repeat scroll right center;
	display: block;
	padding-right: 20px;
	border: 1px solid rgb(170,170,170);
	width: 180px;
}
.select dt a span {
	cursor: pointer;
	display: block;
	padding: 4px;
	height: 15px;
}
.select dd ul {
	background:#fff none repeat scroll 0 0;
	border-bottom:1px solid rgb(170,170,170);
	border-left:1px solid rgb(170,170,170);
	border-right:1px solid rgb(170,170,170);
	border-top:0;
	display:none;
	left:0px;
	padding:5px 0px;
	position:absolute;
	top:-1px;
	width:auto;
	min-width:200px;
	list-style:none;
}
.select dd ul:hover, .select dt a:hover, .select dt a:focus {
	border-color: blue;
}
.select dd ul li a {
	padding-left:10px;
	padding-top:3px;
	padding-bottom: 3px;
	display:block;
}
.selected{
	background: rgb(195,195,195);
}
.header-list {
	padding-left: 3px;
	font-weight: bold;
	font-style: italic;
}

JavaScript

$(document).ready(function() {


    $(".select dt a").click(function() {
        var select = $(this).closest('.select');
        select.find('ul').toggle();
        //$(this).css("background-color", "rgb(255,255,196)");

    });

    $(".select dd ul li a").click(function(e) {
        var text = $(this).html();
        var select = $(this).closest('.select');

        if (e.ctrlKey) {

            $(this).addClass('selected');

            select.find('dt span').html("(" + select.find('a.selected').length + ")")

        }
        else {
            var text = $(this).html();
            select.find("dd a").removeClass('selected');
            $(this).addClass('selected');

            select.find("dt span").html(text);

            select.find("dt a").css("background-color", "");

            select.find("dd ul").hide();
        }

    });

    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (!$clicked.parents().hasClass("select"))
            $(".select dd ul").hide();
    });

});