JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
  <div class="contents showCont">This is content one</div>
  <div class="contents">This is content two</div>
  <div class="contents">This is content three</div>
</div>

CSS

.contents{
  display:none;
}
.showCont{
  display:block;
}

/* Nothing important */
div span{
  border: black solid 1px;
}

JavaScript

$(document).ready(function(){
  $("div span").on('click',function(){
    var $this = $(this),
        targetContent = parseInt($this.html())-1;
    
    $("div .showCont").removeClass("showCont");
    $(".contents:eq("+targetContent+")").addClass("showCont");
        
  });
});