Tabs in Tabs: Synchronize child tabs when switching

Dear Webflow-Community

after reading through a lot on this forum and watching a bunch of videos, I still couldn’t find a solution for my problem, at least none which I with my limited capabilites am able to apply/tweak, so I am asking you for help.

The task:
I want to display a pricing section. It has two selectable dimensions for users: payment period (monthly/yearly), and company size (in FTEs). If a user selects the right company size, then changes the payment period, the expected behaviour would be to stay in the correct company size category.

The problem:
I have set this up as tabs for payment period, and within each tab section, I created tabs for company size. But now I have two disjoint tabs sections, and if I change a tab within one, it does not affect the other.

My desperate trials for a solution:
I already added classes “tabXS” to “tabXL” to each of the corresponding company size tabs to create some kind of link between them, and thought that it should be possible to have some javascript and tell it to “activate all tabs with this class, once ONE of the tabs using this class has been clicked”, but given that I know nothing about JavaScript (yet, still on my list of things I have to learn once I have time), I was not able to do this. Also, I have no idea whether this works using clases, or whether I would have to use the tab NAME, and if so, how would I go about that…

So, any help would be much appreciated!

Thanks in advance
M


Screenshot: