JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" id="Button1" class="ChangeButton" value="show panel 1" />
<input type="button" id="Button2" class="ChangeButton" value="show panel 2" />
<input type="button" id="Button3" class="ChangeButton" value="show panel 3" />
<input type="button" id="Button4" class="ChangeButton" value="show panel 4" />

<div id="PanelContainer">

    <div class="Panel" id="Panel1">panel 1</div>
    <div class="Panel" id="Panel2">panel 2</div>
    <div class="Panel" id="Panel3">panel 3</div>
    <div class="Panel" id="Panel4">panel 4</div>
        
</div>

CSS

.Panel{
    width:200px;
    height:100px;
    background:red;
    display:none;
    color:white;
    padding:20px 20px;}

.ChangeButton{
    margin:10px 10px;
    padding:5px 5px;
    float:left;}
    
#PanelContainer{clear:both;}

JavaScript

$(document).ready(function () {
    $('#Panel1').show();
    $('.ChangeButton').click(function () { DoChange($(this).attr('id')); });
});
    
function DoChange(ButtonID) {

    $('.Panel').hide();
    ShowPanelID(ButtonID.charAt(6));
}

function ShowPanelID(PanelID) {

    //change history here
    $('#Panel' + PanelID).show("medium");
}