Bootstrap 5 toggle d-none for many elements

I have a single visable table with a large amount of hidden tables via d-none. I know I can switch a table on via:

$("#US_table").removeClass("d-none");
$("#US_table").toggle();

How ever the issue is I then have to make 248 other tables not visible e.g.

 $("#AF_table").addClass("d-none");
 $("#AF_table").toggle();
...
 $("#ZW_table").addClass("d-none");
 $("#ZW_table").toggle();

Is there an easier way to remove the d-none class from all the tables instead listing them out as such above?

It's rarely a good idea to deal with IDs for repeated elements. Use a class, and see the many answers on accordion behavior for how to do that:

• Can I toggle one element and at the same time hide the others?
• How can I toggle the element that is clicked and hide all others?
• How can I hide one div and show another with jQuery?

It's hard to be more specific with such a vague description of your scenario.

Also, you seem to be performing redundant behaviors here. Toggling Bootstrap's display class and using jQuery's toggle function do the same thing. Use one or the other, not both.