two sets of dialogs that aren’t active at the same time but are mapped in the same places, distinguished by a button click?

im a real beginner so bear with me here!

some background:
im making my own website because i got tired of the customization limits on sites like Carrd, so my website has a goofy style and looks like a teen in 2005 made it- its intentional.
for my Art Portfolio page, i essentially have a set of CRTs that give you a preview of each piece of mine. you click each one, and it brings up a dialog so you can see the image in further detail and even download it if youd like.

the set of CRTs previewing each piece
the dialog that comes up when the first one is clicked

My problem:
i would ideally like that “Physical” button up at the top to allow you to switch to an entirely different set of CRTs with different images and dialogs. theres a set of 16 images and dialogs for Digital, and a different set of 16 for Physical. The remote at the top allows you to navigate between, for 32 unique dialogs in total.

That probably is incredibly inefficient, but that’s the way I want it to look, SO…

What’s the best way to have two sets of clickable dialogs that aren’t active at the same time but are mapped in the same places?

Thank you for bearing with me here- I tend to get overambitious with my First Time projects, but that’s just because I’m really enjoying learning about html! I appreciate any help or guidance.

I’ve successfully mapped all 16 of the Digital dialogs, and they all come up just fine with the correct images. I’ve attempted some JS to allow me to switch to a new set, but wrangling the first set took a bit of time so I’ve been stuck since. My code is probably the most inefficient way to ever do it (16 dialogs individually mapped out with CSS and in their own DIVs)- I’m okay with that for right now, just as long as it works!