Thank you @Ingolme! I've applied the changes and now I can successfully control corresponding tabs to their content!
I still encounter a weird behaviour, upon first open, tab group 2 and 3 opens all its tab content. After clicking on any tab in group 2 or 3, the appearance comes back to normal.
--> Here is a demo link of the current stage: https://codestudy.w3spaces.com/pricingtablev4-2021-10-27.html
I've set up the first tab (1 device) in each tab group as DefaultOpen, here is the code for the first tab group
<button class="tablinks tabs1" style="width:33.3%" onclick="openPlan(event, 'c11', 'tabs1', 'content1')" id="defaultOpen">1</button>
<button class="tablinks tabs1"style="width:33.3%" onclick="openPlan(event, 'c12', 'tabs1', 'content1')">5</button>
<button class="tablinks tabs1" style="width:33.3%" onclick="openPlan(event, 'c13', 'tabs1', 'content1')">10</button>
In the script it states like this
document.getElementById("defaultOpen").click();
However apart from tab group 1, the other two tab groups seem not to follow this logic.
Do you have tips on further changes to make it work? Thank you!