Get selected item value from Bootstrap DropDown with specific ID

Question

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()); }); 

Answer 1

$('#demolist li').on('click', function(){     $('#datebox').val($(this).text()); }); 

http://jsfiddle.net/kcpma/18/