Question

I have the following jquery to setup my dataTable however the problem I run into is that when two datatables with the same table id exist on the same page, it seems to not load correctly after the first one is loaded. I am using a loop to show multiple tables which is why I have multiple ones on the same screen. Is there a way to make this work? Maybe somehow adding a ++1 to each name as it loops through? would I just loop the JQ through the php code while doing the +1?

<script defer>
    $(window).load(function() {
        $('#backup-list').dataTable({
        "aaSorting": [[ 4, "desc" ]]
        } );
        $(window).resize();
    });

</script>

Answer 1

In HTML, an id can only be used once per page. They need to be unique.

Try giving your tables different IDs:

$("#table1, #table2").dataTable(...);

Or you can give your tables a class, which can be used multiple times on a single page:

$(".your-tables").dataTable(...);