Jquery populate multiple select boxes with the same name

Question

I am dynamically creating elements with javascript that end up looking something like this:

<select id="splitUserDDL" name="splitUserDDL[]"></select>

When I attempt to add options, it seems that the first select box is being populated but not the rest. Is there a way that I can add the same options to all of the select boxes?

    $('#splitUserDDL').empty();
    var userDDL = document.getElementById('splitUserDDL');
    var defaultoption = document.createElement('option');
    defaultoption.text = '-Select-';
    defaultoption.value = 0;
    userDDL.add(defaultoption);

Answer 1

Use a class instead of ID.

<select class="splitUserDDL" name="splitUserDDL[]"></select>

Then use jQuery to add the option, and loop over all of them:

$(".splitUserDDL").empty();
$(".splitUserDDL").each(function() {
    $(this).append($("<option>", {
        text: "-Select-",
        value: 0
    });
});