JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="trigger"></ul>
<ul id="wind">
    <li>1 Lorem</li>
    <li>2 ipsum</li>
    <li>3 dolor</li>
    <li>4 sit</li>
    <li>5 amet</li>
</ul>

CSS

#trigger{overflow:hidden;}
#trigger li{
    float:left;
    cursor:pointer;
    padding:10px;
    margin:5px;
    border:solid 1px black;
}
#wind li{display:none;}
#wind li:first-child{display:block;}

JavaScript

$("#wind li").each(function(index){
    $("#trigger").append("<li>"+ (index+1) + "</li>");
});
$("#trigger li").click(function(){
    $("#wind li").hide();
    $("#wind li").eq($(this).index()).show();
});