JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dropdown_box"><span>1st Priority</span>
</div>
<div class="dropdown_container">
    <ul id="select_dislikes">
       <li class="dislike">
            <a href="#"><label><input type="checkbox" name="first_dislike" value="Shoulders" />Shoulders</label></a>
            <ul class="reason">               
                <li><a href="#"><label><input class="area" type="checkbox" name="bother_shoulders" value="Too_small" class="goal-increase"/>Too Small</label></a></li>                
                <li><a href="#"><label><input type="checkbox" name="bother_shoulders" value="Too_big" class="goal-decrease"/>Too Big</label></a></li>
            </ul>  
        </li>  
        <li class="dislike">
            <a href="#"><label><input type="checkbox" name="first_dislike" value="Waist" />Waist</label></a>
            <ul class="reason">               
                <li><a href="#"><label><input type="checkbox" name="bother_waist" value="Too_defined" class="goal-increase"/>Too Defined</label></a></li>                
                <li><a href="#"><label><input type="checkbox" name="bother_waist" value="Not_defined" class="goal-decrease"/>Not Defined</label></a></li>
            </ul>  
        </li>    
    </ul>
</div>

CSS

body {
             font: 7.5pt Verdana, Arial, sans-serif;
             color: #555555;
         }
         .dropdown_box {
             background:#ffffff url(images/arrow1.png) no-repeat scroll 97.5% center;
             cursor:pointer;
             display:block;
             font: 7.5pt Verdana, Arial, sans-serif;
             color: #555555;
             padding:0px 25px 0px 5px;
             line-height: 18px;
             vertical-align: middle;
             border: 1px solid #d3d3d3;
             border-radius:4px;
             -moz-border-radius:4px;
             -webkit-border-radius: 4px;
             -khtml-border-radius: 4px;
             margin:0px;
             padding:0px;
             width:150px;
         }
         .dropdown_container {
             position:relative;
         }
         .dropdown_container a {
             color:#555555;
             text-decoration:none;
         }
         .dropdown_container a:hover {
             color:#212121;
         }
         .dropdown_container ul {
             display:none;
             position:absolute;
             top:0px;
             left:0px;
             margin:0px;
             padding:5px 0px;
             list-style:none;
             border:1px solid #d3d3d3;
             color:#555555;
         }
         .dropdown_container ul li ul {
             display:none;
             width:100px;
             position:absolute;
             top:0px;
             left:0px;
             margin:0px;
             padding:0px 0px;
             list-style:none;
             background:#ffffff none repeat scroll 0 0;
             border:1px solid #d3d3d3;
             color:#555555;
         }
         .cbx {
             visibility:hidden;
             display:none;
         }

JavaScript

$(function () {
        $("#select_dislikes").menu();
    });

    $(document).ready(function () {
        $(".dropdown_box").click(function () {
            $("#select_dislikes").show();
        });
        var timeoutID;
       // $("#select_dislikes").mouseleave(function () {
       //     timeoutID = setTimeout(function () {
       //         $("#select_dislikes").hide();
       //     }, 800);
       // });
       // $("#select_dislikes").mouseenter(function () {
       //     clearTimeout(timeoutID);
       // });

        $(".dropdown_container ul li.dislike a").click(function () {
            var dislike = $(this).find("input").val();
            var dislike_formatted = dislike.replace(/_/g, " ");
            var currentHtml = $(".dropdown_box span").html();
            // $(".dropdown_box span").html(currentHtml.replace(currentHtml, ''));
            $(".dropdown_box span").html(currentHtml.replace(currentHtml, ''));
            $(".dropdown_box span").append(dislike_formatted);
        });

        $("ul.reason a").click(function () {
            var reason = $(this).find("input").val();
            var dislike = $(this).parents('li.dislike').find("input").val();
            var reason_formatted = reason.replace(/_/g, " ");
            var dislike_formatted = dislike.replace(/_/g, " ");
            var currentHtml = $(".dropdown_box span").html();
            $(".dropdown_box span").html(currentHtml.replace(currentHtml, ''));
            $(".dropdown_box span").append(dislike_formatted + ': ' + reason_formatted);
        });
    });