Show different text in a separate div by select options

I'm trying to show different text when selecting an option from a select, but it doesn't work.

I'm trying to get the open button to display text 1, then depending on the option chosen the text changes, and finally for the displayed text to disappear when pressing close.

I know the javascript code is long and bad, but please don't judge me, it's not easy for me. Thank you.

$(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');
  });
});

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<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>

https://jsfiddle.net/ytgb3p27/10/

Solution

We are judging code not people. Let's write a version that works, even without jQuery. Most important thing is not to repeat yourself. This should get you started.

Update: Let's use attributes to connect between the list options and their respective text, instead of relying on their id.

Note: We are taking advantage of some "advanced" CSS selectors, but we could have used a class instead, or use JavaScript to search.

const select = document.querySelector("#select")

function close_all() {
  document.querySelectorAll(".texts>div").forEach(function(div) {
    div.classList.remove("active")
  })
}

function open_current() {
  var value = select.value
  // var text_id = "Text" + value
  close_all();
  document.querySelector(`[data-something="${value}"]`).classList.add("active");
}

select.addEventListener('change', open_current);
document.querySelector("#close").addEventListener('click', close_all)
document.querySelector("#open").addEventListener('click', open_current)

.texts>div {
  opacity: 0;
  transition: opacity 350ms ease;
}

.texts>div.active {
  opacity: 1;
}

<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 class="texts">
  <div id="Text1" data-something="1">Show text 1</div>
  <div id="Text2" data-something="2">Show text 2</div>
  <div id="Text3" data-something="3">Show text 3</div>
  <div id="Text4" data-something="4">Show text 4</div>
  <div id="Text5" data-something="5">Show text 5</div>
</div>