How can I optimize the performance of a complex tab setup with dropdowns, such that tabs switch more quickly and work correctly?

Question

These tabs(Web Design, Logo Design, Business Cards, Delivered Products) are not working but when I click on the " Web Design " tab All Tabs will work correct but slow. This problem occurs when I placed a drop down right adjacent of the " Web Design ". Above is the image of the tabs The code that im trying to implement is: https://codepen.io/jackbrown0987/pen/VwOYoMj ` Web Design Toggle Dropdown

ONLINE STORE

SHOPIFY

RESTAURANT

CONSTRUCTION

ARCHITECTURE & DESIGN

CLEANING

ROOFING

POOLS & SPA

REAL ESTATE

HANDYMAN

HVAC SERVICES

LANDSCAPING

                </div>
                <div class="col ">
                    <li><a class="dropdown-item" href="#patios" onclick="changeTab('tab9-tab-pane')">PATIOS &amp;
                        LAWN CARE</a></li>
                    <li><a class="dropdown-item" href="#plumbing" onclick="changeTab('tab10-tab-pane')">PLUMBING</a>
                    </li>
                    <li><a class="dropdown-item" href="#electric-solutions" onclick="changeTab('tab11-tab-pane')">ELECTRIC
                        SOLUTIONS</a></li>
                    <li><a class="dropdown-item" href="#renovation" onclick="changeTab('tab12-tab-pane')">RENOVATION
                        &amp; REMODELING</a></li>

                </div>
            </div>
            <div class="row">
                <div class="col">
                    <li><a class="dropdown-item" href="#marble-counter" onclick="changeTab('tab1-tab-pane')">MARBLE
                        &amp; COUNTER TOPS</a></li>
                    <li><a class="dropdown-item" href="#home-care" onclick="changeTab('tab2-tab-pane')">HOME CARE
                        SERVICES</a></li>
                    <li><a class="dropdown-item" href="#non-profit" onclick="changeTab('tab3-tab-pane')">NON PROFIT
                        ORG</a></li>
                    <li><a class="dropdown-item" href="#windows" onclick="changeTab('tab4-tab-pane')">WINDOWS &amp;
                        DOORS</a></li>
                </div>
                <div class="col ">
                    <li><a class="dropdown-item" href="#flooring" onclick="changeTab('tab5-tab-pane')">FLOORING</a>
                    </li>
                    <li><a class="dropdown-item" href="#glass-roofing" onclick="changeTab('tab6-tab-pane')">GLASS
                        &amp; MIRRORS</a></li>
                    <li><a class="dropdown-item" href="#painting/drywall" onclick="changeTab('tab7-tab-pane')">PAINTING/DRYWALL</a>
                    </li>
                    <li><a class="dropdown-item" href="#restoration" onclick="changeTab('tab8-tab-pane')">RESTORATION</a>
                    </li>
                </div>
                <div class="col">
                    <li><a class="dropdown-item" href="#network-solutions" onclick="changeTab('tab9-tab-pane')">NETWORK
                        SOLUTIONS</a></li>
                    <li><a class="dropdown-item" href="#industrial-services" onclick="changeTab('tab10-tab-pane')">INDUSTRIAL
                        SERVICES</a></li>
                    <li><a class="dropdown-item" href="#trucking" onclick="changeTab('tab11-tab-pane')">TRUCKING</a>
                    </li>
                    <li><a class="dropdown-item" href="#organization-web" onclick="changeTab('tab12-tab-pane')">ORGANIZATION
                        WEB</a></li>

                </div>
                <div class="col">
                    <li><a class="dropdown-item" href="#auto-mobile" onclick="changeTab('tab9-tab-pane')">AUTO
                        MOBILE INDUSTRY</a></li>
                    <li><a class="dropdown-item" href="#pet-care" onclick="changeTab('tab10-tab-pane')">PET CARE
                        SERVICES</a></li>
                    <li><a class="dropdown-item" href="#cab-services" onclick="changeTab('tab11-tab-pane')">CAB
                        SERVICES</a></li>
                    <li><a class="dropdown-item" href="#moving-delivery" onclick="changeTab('tab12-tab-pane')">MOVING
                        &amp; DELIVERY</a></li>
                </div>
            </div>
        </ul>
    </li>

    <li class="nav-item btn-group" role="presentation">
        <button class="nav-link" id="tab2-tab" data-bs-toggle="tab" data-bs-target="#tab2-tab-pane" type="button"
                role="tab" aria-controls="tab2-tab-pane" aria-selected="false">Logo Design
        </button>
    </li>

    <li class="nav-item btn-group" role="presentation">
        <button class="nav-link" id="tab3-tab" data-bs-toggle="tab" data-bs-target="#tab3-tab-pane" type="button"
                role="tab" aria-controls="tab3-tab-pane" aria-selected="false">Business Cards
        </button>
    </li>
    <li class="nav-item btn-group" role="presentation">
        <button class="nav-link" id="tab4-tab" data-bs-toggle="tab" data-bs-target="#tab4-tab-pane" type="button"
                role="tab" aria-controls="tab4-tab-pane" aria-selected="false">Mobile App
        </button>
    </li>
    <li class="nav-item btn-group" role="presentation">
        <button class="nav-link" id="tab5-tab" onclick="gallerySet()" data-bs-toggle="tab"
                data-bs-target="#tab5-tab-pane" type="button" role="tab" aria-controls="tab5-tab-pane"
                aria-selected="false">Delivered Products
        </button>
    </li>
  
</ul>`

I just want that these tabs as they have to and the tabs should shift more faster