JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <!--header goes here-->
    <h1>Menu Demo</h1>
</div><!-- #header -->
<form style="margin:0;" action="/" method="POST">
<div id="book_now_bar">
    <div class="bookEngineBox" id="property">
        <div class="dropdownWrapper">
            <p class="label">Select Menu</p>
            <div class="dropdown">
                <a href="#item_id" class="selected">
                    <span class="ddText">- All  -</span> 
                    <span class="arrow"></span>
                </a>
                <div class="dropdownMenu">
                    <ul>
                        <li>
                            <a href="#" rel="0">
                                - All  -
                            </a>
                        </li>
                        <li>
                            <a href="#" rel="1">
                                Item 1
                            </a>
                        </li>
                        <li>
                            <a href="#" rel="2">
                                Item 2
                            </a>
                        </li>
                        <li>
                            <a href="#" rel="3">
                                Item 3
                            </a>
                        </li>              
                    </ul>     
                </div><!-- .dropdownMenu -->
            </div><!-- .dropdown -->
        </div><!-- .dropdownWrapper -->
    </div><!-- .bookEngineBox -->
</div>
</form>

CSS

div,form{padding:5px; margin:5px;}
form div{padding:2px;margin:2px;}
.dropdown{background-color:#eee;}
.dropdown, #item_id,.selected, .ddText,
.arrow, .dropdownMenu{
    border:1px solid #ff0000;
}
ul li{margin:10px;}
html,body{ height:100%}

JavaScript

var j = jQuery.noConflict();
/* Drop Down Menus */
j('.dropdown .selected').live('click', function(e) {
    e.preventDefault();
    j(this).next().slideToggle(250, function() {    
        j('.dropdownMenu a').live('click', function(e) {
            e.preventDefault();
            var selectedLink = j(this).parent().parent().parent().prev();
            var selected = selectedLink.text();
            var fieldTarget = selectedLink.attr('href');
            var text = j(this).text();
            var value = j(this).attr('rel');
            selectedLink.html('<span class="ddText">'+
                                    text+
                              '</span>'+
                              '<span class="arrow"></span>');
            j('.dropdownMenu').slideUp(250);
            j(fieldTarget).val(value);
        });
    });
});

j('body').click(function(event) {
        var $tgt=j(event.target); 
        if( !$tgt.closest('.dropdown').length && !$tgt.is('.dropdown')) {       
        j('.dropdownMenu').slideUp(250);
    }
});