"Another object on this page already uses ID 'XXXXXXX'

I've got a jQuery Multiselect Listbox control on my page:

jQuery(document).ready(function () {
    jQuery(function () {
        jQuery("#UCStyle1 select").multiselect({
                header: true,
                height: 175,
                minWidth: 240,
                size: 3,
                classes: '',
                checkAllText: 'Check all',
                uncheckAllText: 'Uncheck all',
                noneSelectedText: '0 Selected',
                selectedText: '# selected',
                selectedList: 0,
                show: null,
                hide: null,
                autoOpen: false,
                multiple: true,
                position: {},
                appendTo: "body"
        });
});

It's referenced a bunch of times in div tags like this:

<tr>
    <td>
        Looking for:
    </td>
    <td colspan="3">
        <div id="UCStyle1">
            <asp:ListBox ID="MatchGender" SelectionMode="Multiple" runat="server">
            </asp:ListBox>
        </div>
    </td>
</tr>
<tr>
    <td>
        State:
    </td>
    <td colspan="3">
        <div id="UCStyle1">
            <asp:ListBox ID="sState" SelectionMode="Multiple" runat="server">
            </asp:ListBox>
        </div>
    </td>
</tr>

So, they need to reference that jQuery, but they're different controls.

I'm getting the warning:

Another object on this page already uses ID 'ucstyle1'

Multiple times.

Any idea how I can clean this up so that I don't get that warning? I think it's causing the page to look completely wonky on IE, but Firefox doesn't seem to care about it.

Solution

You have two div tags with same id (UCStyle1) but since id is unique you cannot use a duplicate one in a page. You can use class instead of id if you want to repeat it.

<div class="UCStyle1">

And

<div class="UCStyle1">

And:

jQuery(".UCStyle1 select").multiselect({