JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <script language="javascript">
        function MyFunction(divName){
        
        //hidden val
        var hiddenVal = document.getElementById("tempDivName"); 
        
        //hide old
        if(hiddenVal.Value != undefined){
            var oldDiv = document.getElementById(hiddenVal.Value); 
            oldDiv.style.display = 'none'; 
        }
        
        //show div
            var tempDiv = document.getElementById(divName); 
            tempDiv.style.display = 'block';              
        
        //save div ID
            hiddenVal.Value = document.getElementById(divName).getAttribute("id");
                
        }
    </script>
    <input id="tempDivName" type="hidden" />
    <ul>
        <li><a href="#" OnClick="MyFunction('myDiv1');">Show myDiv1</a></li>
        <li><a href="#" OnClick="MyFunction('myDiv2');">Show myDiv2</a></li>
        <li><a href="#" OnClick="MyFunction('myDiv3');">Show myDiv3</a></li>
    </ul>
    <br/>
    <div id="myDiv1" style="background-color:red; height:200px; width:200px; display:none">
        myDiv1
    </div>
    <div id="myDiv2" style="background-color:yellow; height:200px; width:200px; display:none">
        myDiv2
    </div>
    <div id="myDiv3" style="background-color:green; height:200px; width:200px; display:none">
        myDiv3
    </div>
</body>