javascript - 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/