JQueryUI Tabs: OK to reuse DOM element ID's?

Question

I am using JQueryUI tabs to display a number of lists. Each list is pulled in from an external file. While each list is unique, there is some common functionality between them - for example, the user is able to delete an item from each list.

I use the currently selected tab to determine how to handle the page, like this:

$("#tabs").tabs({
    load: function(event, ui){
        var tab = $("#tabs").tabs("option", "selected");
        switch(tab){
            case 0:
                // do stuff here
                break;
            case 1:
                // do stuff here
                break;
        }
    }
});

In the "// do stuff here" I refer to each list, which is in a table, with its own ID.

However, when a user wants to delete an item I reuse the same ID:

$("#dlg_delete").dialog();  // options removed for brevity

The div with the id='dlg_delete' appears in each page that is dynamically loaded when a tab is clicked.

Is it OK to reuse that same ID, since it can only be loaded once? Or is there something I may be missing. It is much easier, for code reuse, to just have one id.

Answer 1

As long as there is only one element with that id in the DOM at any given time, it's OK, if I've understood correctly.

That way, if you want to access something by id, you still can.