jQuery UI: How to add ID to combobox

Question

I have a website with three comboboxes. I use the comobox widget for jQuery UI. I would like to be able to individually style each combox via addressing an id instead of using the nth-type selector. How can I add an id when a combobox gets initialized?

My JS:

$('#my-select-1').combobox();
$('#my-select-2').combobox();
$('#my-select-3').combobox();

Applying the comobox widget, results in the following markup:

<select id="my-select-1" style="display:none;">
<span class="custom-combobox">...</span>
<select id="my-select-2" style="display:none;">
<span class="custom-combobox">...</span>
<select id="my-select-3" style="display:none;">
<span class="custom-combobox">...</span>

JSFiddle: https://jsfiddle.net/3xkaj0ah/1/

My goal is that I can give each <span class="custom-combobox"> element an id.

Answer 1

Try this one.

$('#my-select-1').combobox();
$('#my-select-1').next('.custom-combobox').attr('id','aa');
$('#my-select-2').combobox();
$('#my-select-2').next('.custom-combobox').attr('id','bb');
$('#my-select-3').combobox();
$('#my-select-3').next('.custom-combobox').attr('id','cc');