JSFiddle - React, Tailwind, and code Playground

HTML

<span id="MENU1" class="active" onclick="showHide('1');"><center>1</center></span>
        <span id="MENU2" onclick="showHide('2');"><center>2</center></span>
        <span id="MENU3"  onclick="showHide('3');"><center>3</center></span>
        <span id="MENU4"  onclick="showHide('4');"><center>4</center></span>

        <div id="CONTAINER"></div>

CSS

.active{
        color:#FF6a00;
        background: red;
        background-repeat:round;
        background-size:cover;
    }

    .inactive{
        color:black;
        background: green;
        background-repeat:round;
        background-size:cover;
    }

JavaScript

function showHide(divId){
        $("span").removeClass("active");
        var id = "MENU" + divId;
        var theDiv = document.getElementById(id);
          $(theDiv).addClass("active"); 
    
        var data = "<div id='CONTENT'" + divId + ">here somehow wil appear content " + divId + "</div>";
        var print = document.getElementById("CONTAINER");
        print.innerHTML = data;   
    }