Display only one CMS item on click

I have a section in my project with colorful buttons and photos. The colors of the buttons and the photos come from two collections connected using a reference field.
The goal is to display a list of all buttons and only one item from photos collection. The photos are supposed to change depending on the click of the button. (specific buttons are linked to colors using a reference field.)
Has anyone done something like this?
I guess the only solution is to add custom code, but how to refer to the elements in the collection?
I’m stuck. Help. Thank you.

Here is my public share link: LINK
(how to access public share link)