Linking separate product together : selected product highlighted

Hi everyone,

I want to link separate products together on the product page, creating color-swatches-like block on the front end. Each product is an individual product on the back end, but is linked to the others like regular variations on the front end.

I did this using metafields + custom liquid. It worked, but now I struggle to make the swatches dynamic like real product variations would do. That is to say to highlight which product is currently selected/viewed (with a thicker border for example)

I tried to use the :active pseudo-element with CSS to do this but doesn’t work. I guess I should use Javascript for that, but I am quite a newbie for that.

How could I do that ? Is there a way to add a dynamic “selected” class that I could target for example ?

Thanks !