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

});