Streaming live at 10am (PST)

Same interactions on different collection lists

I have a bunch of collection lists (posts). All of them pull from the same CMS collection.
Each list is only visible if certain criteria are met (conditional visibility by the year (category in CMS)), and within each list only items that meet that criteria (year) are shown (filtered by year).
So basically… folder 2022 only shows posts from 2022; folder 2021 only shows posts from 2021 and so on.
On each list I have a bunch of interactions (mainly clicks to open/close drawers with content, e.g. clicking on the 2022 folder shows a list of dates of posts published in 2022; clicking on that date then opens post headers of posts available at that date; and finally, clicking on that date opens the respective post. Of course all these drawers can be closed again separately as well.

I’m struggling with finding an efficient way to set up the interactions.
I started with one folder, 2020, copied that folder, named it 2021 and applied the respective conditional visibility and filtering to it. All good.
But of course, now the interactions still pointed to the 2020 folder elements. I then re-directed all the interactions to the respective elements in the 2021 folder but of course now the interactions in the 2020 folder are wrong…

How do I go about this?!
Do I have to give each element with an interaction on it a specific category class (e.g. _2021; _2022…) and then still manually point each interaction to that element? Do I then have to make a copy of each interaction and give that a distinctive name?
I’ll have 10 years worth of posts!
There must be a better way to do this!

I’d really appreciate suggestions from experienced folks.
I’m pretty sure I am looking at this way too complicated…
Keep in mind, I’m still a beginner to web dev (with just basic understanding of HTML, CSS and only very very basic Js).

Thank you!


Here is my site Read-Only: [LINK]