Basic tab navigation is not working in HTML

function socialMedia(media, mediaName) {
    var i, navcontent, navlinks;
    navcontent = document.getElementsByClassName("navcontent");
    for (i = 0; i < navcontent.length; i++) {
        navcontent[i].style.display = "none";
    }
    navlinks = document.getElementsByClassName("navlinks");
    for (i = 0; i < navlinks.length; i++) {
        navlinks[i].className = navlinks[i].className.replace(" active", "");
    }
    document.getElementById(mediaName).style.display = "block";
    media.className += " active";

}

.nav {
        overflow: hidden;
        margin-top: 50px;

        button{
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 15px 0px;
            height: 50px;
            width: 110px;
            transition: 0.3s;
            font-size: 17px;
            color: #360b9a;
            transition: .5s all;

            &:hover {
                font-weight: 700;
            }
        }

        .active {
            background-color: #ccc;
        }

    }
    .navcontent {
        display: none;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
    }

<div class="nav">
            <button class="navlinks" onclick="socialMedia(this, 'Twitter')">Twitter</button>
            <button class="navlinks" onclick="socialMedia(this, 'Facebook')">Facebook</button>
            <button class="navlinks" onclick="socialMedia(this, 'Instagram')">Instagram</button>
        </div>

        <div id="Twitter" class="navcontent">
            <p>
                Look no more if you are after a venue to host thousands of delegates for highly 
                exclusive conferences and exhibitions. At Hamdan Sports Complex, you are given the 
                flexibility to customize the venue according to your space and event requirements.
            </p>
            <p>
                Look no more if you are after a venue to host thousands of delegates for highly 
                exclusive conferences and exhibitions. At Hamdan Sports Complex, you are given the 
                flexibility to customize the venue according to your space and event requirements.
            </p>
            <div class="sub">
                <a>#lorem</a>
                <a>#ipsum</a>
                <a>#lorem</a>
            </div>
        </div>
        <div id="Facebook"></div>
        <div id="Instagram"></div>        

// DOM utility functions:

const el  = (sel, par) => (par ?? document).querySelector(sel); 
const els = (sel, par) => (par ?? document).querySelectorAll(sel); 


// Task: Toggle social

const elsSocialButtons = els("[data-social]");
const elsNavContents = els(".navcontent");

const toggleNavContent = (elSocialBtn) => {
  elsNavContents.forEach(elNav => {
    elNav.classList.toggle("active", elNav === el(elSocialBtn.dataset.social));
  });
  elsSocialButtons.forEach(elBtn => {
    elBtn.classList.toggle("active", elBtn === elSocialBtn);
  });
}

els("[data-social]").forEach(elSocialBtn => {
  elSocialBtn.addEventListener("click", (ev) => {
    toggleNavContent(ev.currentTarget);
  });
});

.navcontent {
  background: #ccc;
  display: none;
}

.navcontent.active {
  display: block;
}

.navlinks.active {
  color: red;
}

<div class="nav">
  <button class="navlinks" data-social="#tw">Twitter</button>
  <button class="navlinks" data-social="#fb">Facebook</button>
  <button class="navlinks" data-social="#ig">Instagram</button>
</div>

<div id="tw" class="navcontent">Tweets...</div>
<div id="fb" class="navcontent">Facebook...</div>
<div id="ig" class="navcontent">Instagram...</div>