Get selected item value from Bootstrap DropDown with specific ID

I am "creating" my own "ComboBox" using `Bootstrap 3` and JavaScript. `Here is the JSFiddle` for what I have so far: HTML: ``` <div class="input-group"> <input type="TextBox" ID="datebox" Class="form-control"></input> <div class="input-group-btn"> <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul id="demolist" class="dropdown-menu"> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> </ul> </div> </div> ``` JavaScript: ``` $(document).on('click', '.dropdown-menu li a', function() { $('#datebox').val($(this).html()); }); ``` This approach works great untill I want to repeat this "ComboBox" several times on the page. The issue is with the JQuery function looking for ANY/ALL `'.dropdown-menu li a'`. How can I change my JQuery to look only for UL with ID demolist and get its selected value? I have tried the following without success: I tried `'#demolist .dropdown-menu li a'` but that will not fire the function: ``` $(document).on('click', '#demolist .dropdown-menu li a', function() { $('#datebox').val($(this).html()); }); ``` I tried calling the Click of #demolist but `#datebox` gets the HTML of ALL list item of #demolist and not the selected innerHTML of item: ``` $('#demolist').on('click', function(){ $('#datebox').val($(this).html()); }); ``` UPDATE: The working solutions are: ``` $('#demolist li a').on('click', function(){ $('#datebox').val($(this).html()); }); ``` OR ``` $('#demolist li').on('click', function(){ $('#datebox').val($(this).text()); }); ```