JSFiddle - React, Tailwind, and code Playground

HTML

<button id="open">Open</button>
<button id="close">Close</button>

<select id="select">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<div>
  <div id="Text1">Show text 1</div>
  <div id="Text2">Show text 2</div>
  <div id="Text3">Show text 3</div>
  <div id="Text4">Show text 4</div>
  <div id="Text5">Show text 5</div>
</div>

CSS

#Text1,#Text2,#Text3,#Text4,#Text5{
  opacity: 0;
  visibility: hidden;}
  
  #Text1.visible,#Text2.visible,#Text3.visible,#Text4.visible,#Text5.visible{
  opacity: 1;
  visibility: visible;}

JavaScript

$(document).ready(function($){
$('#open').on('click', function(event){
    $('#Text1').addClass('.visible');
});
});
$(document).ready(function($){
$('#close').on('click', function(event){
    $('#Text1').removeClass('visible');
    $('#Text2').removeClass('visible');
    $('#Text3').removeClass('visible');
    $('#Text4').removeClass('visible');
    $('#Text5').removeClass('visible');
});
});
$(document).ready(function($){
$("#select").val("1").on('change', function(event){
    $('#Text1').addClass('visible');
    $('#Text2').removeClass('visible');
    $('#Text3').removeClass('visible');
    $('#Text4').removeClass('visible');
    $('#Text5').removeClass('visible');
});
});
$(document).ready(function($){
$("#select").val("2").on('change', function(event){
    $('#Text1').removeClass('visible');
    $('#Text2').addClass('visible');
    $('#Text3').removeClass('visible');
    $('#Text4').removeClass('visible');
    $('#Text5').removeClass('visible');
});
});
$(document).ready(function($){
$("#select").val("3").on('change', function(event){
    $('#Text1').removeClass('visible');
    $('#Text2').removeClass('visible');
    $('#Text3').addClass('visible');
    $('#Text4').removeClass('visible');
    $('#Text5').removeClass('visible');
});
$(document).ready(function($){
$("#select").val("4").on('change', function(event){
    $('#Text1').removeClass('visible');
    $('#Text2').removeClass('visible');
    $('#Text3').removeClass('visible');
    $('#Text4').addClass('visible');
    $('#Text5').removeClass('visible');
});
});
$(document).ready(function($){
$("#select").val("5").on('change', function(event){
    $('#Text1').removeClass('visible');
    $('#Text2').removeClass('visible');
    $('#Text3').removeClass('visible');
    $('#Text4').removeClass('visible');
    $('#Text5').addClass('visible');
});
});