dropdown multiple options issue - html

Question

I have a list of contacts, I would like to display the phoneNumbers in inputs with dropdown.
<div id="retrievedContactsDiv" data-bind="foreach: Model.userContacts.contacts()">
<!-- ko if: ($data.phoneNumbers().length >= 1) -->
<div class="control-group span3 offset3 ">
<div class="input-append btn-group">
<input id="appendedInputButton" type="text" data-bind="value:$data.phoneNumbers()[0].phoneNumber()">
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- ko foreach: $data.phoneNumbers() -->
<li><span data-bind="text: $data.phoneNumber()"></span> </li>
<!-- /ko -->
</ul>
</div>
</div>
<!-- /ko -->
</div>
JS
$('.dropdown-menu li span').click(function(){
var elementVal=$(this).text();
$('#appendedInputButton').val('');
$('#appendedInputButton').val(elementVal);
});
My problem is that I can't have same id, if I use class all the phoneNumbers of my contacts list will be modified, How can I do it to display correct value if the user use dropdown ?
http://imageup.fr/uploads/1377867794.jpeg

Answer 1

Use jQuery smart selectors to find the closest common parent and then find the field inside it.
$('.dropdown-menu li span').click(function(){
var elementVal = $(this).text();
$(this).closest('.input-append').find('#appendedInputButton').val(elementVal);
});
Actually this is also wrong (in terms of HTML) because you're stuck with duplicate IDs. I would rather suggest you do the same with a class instead of id, it'll work exactly the same with the suggested JS above.