In the code below I have two sections of a table that have three tabs each. They are based of the Tabs example on W3 Schools page, hence why it still refers to “city” instead of something like “sport”. The issue that I am having is that when I activate one tab in one section, it completely deactivates the tab in the other table section SITE LINK WITH PROBLEM. code posted below.

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<div class="w3-container">
<h2>Trojan Athletic Fund</h2>

<table border="1" cellpadding="1" cellspacing="1" style="height:100%;width:100%;">
    <tbody>
        <tr>
            <td style="vertical-align: middle; width: 50%;">
            <div class="sidearm-story-image-align-center" style="text-align:center; margin:0px; padding:0px"><img alt="Baseball TAF Photo" height="333" src="/images/2024/7/19/AU_Baseball_0251-2-1024x683__1_.jpeg" style="display: inline-block;" width="500" /></div>
            </td>
            <td>
            <div class="sidearm-story-image-align-center" style="text-align:center"><img alt="WBB TAF Photo" height="333" src="/images/2024/7/19/AU_WBB_379-1024x617__1_.jpeg" style="display: inline-block;" width="500" /></div>
            </td>
        </tr>
        <tr>
            <td style="width: 50%; vertical-align: top;">
            <div class="parent_target">
            <div class="w3-row">
            <div class="w3-third w3-bottombar w3-hover-light-grey w3-padding"><a href="javascript:void(0)" onclick="openCity(this, 'Baseball1');">Baseball One</a></div>

            <div class="w3-third w3-bottombar w3-hover-light-grey w3-padding"><a href="javascript:void(0)" onclick="openCity(this, 'Baseball2');">Baseball Two</a></div>

            <div class="w3-third w3-bottombar w3-hover-light-grey w3-padding"><a href="javascript:void(0)" onclick="openCity(this, 'Baseball3');">Baseball Three</a></div>
            </div>

            <div class="w3-container city" id="Baseball1">
            <h2>Team Website</h2>

            <p>Stay up to date with how your Trojans are doing this season! <a href="www.autrojans.com/sports/baseball">Trojans Baseball</a></p>
            </div>

            <div class="w3-container city" id="Baseball2" style="display:none">
            <h2>Coaches Letter</h2>

            <p><strong>Dear Trojan Army,</strong> Greetings from Anderson University Baseball! On behalf of our Trojans, I would like to thank you for supporting our mission of providing an exceptional academic and athletic experience for our student-athletes. As the Baseball coach, your generosity ensures that each student-athlete can have fun, explore their faith, form relationships, and build accountability within their teams. Additionally, Anderson University Athletics continually leads the South Atlantic Conference in academic standing and consistently breaks school records in competition and in the classroom each year! Over the last few years, gifts to the Trojan Athletic Fund and Baseball have supported us as we have continued to improve and make waves in the SAC. We ousted third-seed Catawba from the first round of the SAC tournament in 2023 and are looking forward to an exciting 2024 season! Anderson University Baseball thanks you and we look forward to seeing you at our games soon! <strong>Go Trojans!</strong> Coach PJ Zocchi Anderson University Baseball</p>
            </div>

            <div class="w3-container city" id="Baseball3" style="display:none">
            <h2>Projects</h2>

            <p>Equipment</p>

            <ul>
                <li>Bats</li>
                <li>Baseballs</li>
                <li>Gloves</li>
            </ul>

            <p>Technology</p>

            <ul>
                <li>Trackman Baseball</li>
                <li>Rapsodo Baseball</li>
                <li>New Scoreboard</li>
            </ul>
            </div>
            </div>
            </td>
            <td style="width: 50%; vertical-align: top;">
            <div class="parent_target">
            <div class="w3-row">
            <div class="w3-third w3-bottombar w3-hover-light-grey w3-padding"><a href="javascript:void(0)" onclick="openCity(this, 'WBB1');">WBB One</a></div>

            <div class="w3-third w3-bottombar w3-hover-light-grey w3-padding"><a href="javascript:void(0)" onclick="openCity(this, 'WBB2');">WBB Two</a></div>

            <div class="w3-third w3-bottombar w3-hover-light-grey w3-padding"><a href="javascript:void(0)" onclick="openCity(this, 'WBB3');">WBB Three</a></div>
            </div>

            <div class="w3-container city" id="WBB1">
            <h2>Team Website</h2>

            <p>Stay up to date with how your Trojans are doing this season! <a href="www.autrojans.com/sports/baseball">Trojans Baseball</a></p>
            </div>

            <div class="w3-container city" id="WBB2" style="display:none">
            <h2>Coaches Letter</h2>

            <p><strong>Dear Trojan Army,</strong> Greetings from Anderson University Baseball! On behalf of our Trojans, I would like to thank you for supporting our mission of providing an exceptional academic and athletic experience for our student-athletes. As the Baseball coach, your generosity ensures that each student-athlete can have fun, explore their faith, form relationships, and build accountability within their teams. Additionally, Anderson University Athletics continually leads the South Atlantic Conference in academic standing and consistently breaks school records in competition and in the classroom each year! Over the last few years, gifts to the Trojan Athletic Fund and Baseball have supported us as we have continued to improve and make waves in the SAC. We ousted third-seed Catawba from the first round of the SAC tournament in 2023 and are looking forward to an exciting 2024 season! Anderson University Baseball thanks you and we look forward to seeing you at our games soon! <strong>Go Trojans!</strong> Coach PJ Zocchi Anderson University Baseball</p>
            </div>

            <div class="w3-container city" id="WBB3" style="display:none">
            <h2>Projects</h2>

            <p>Equipment</p>

            <ul>
                <li>Bats</li>
                <li>Baseballs</li>
                <li>Gloves</li>
            </ul>

            <p>Technology</p>

            <ul>
                <li>Trackman Baseball</li>
                <li>Rapsodo Baseball</li>
                <li>New Scoreboard</li>
            </ul>
            </div>
            </div>
            </td>
        </tr>
    </tbody>
</table>
<br />
<script> function openCity(elem, cityName) { var i, x, tablinks; x = document.getElementsByClassName("city"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } document.getElementById(cityName).style.display = "block"; evt.currentTarget.firstElementChild.className += " w3-border-red"; } </script></div>

I’ve tried changing the city names, adding a parent-element feature and still am having the issue.