How to display the corresponding block when pressing 1 of 4 buttons?

Question

JavaScript

There is a block with text and next to it there are 4 buttons, when you click on 1 button, text 1 will appear. When you click on button 2, text 2 appears, respectively, when you click on button 1, text 1 will appear back. And so with all the buttons. How to implement this in jquery?

Answer 1

https://denis-creative.com/jquery-tabs/

Answer 2

<div id="text">тут</div>

<button id="1" class="button">1</button>
<button id="2" class="button">2</button>
<button id="3" class="button">3</button>
<button id="4" class="button">4</button>

const data = {
  1:'текст 1',
  2:'текст 2',
  3:'текст 3',
  4:'текст 4'
}

const buttons = [...document.querySelectorAll('.button')]

buttons.map(item => {
 item .addEventListener("click", function() {
  document.getElementById("text").innerHTML = 
  data[this.id]
 });
})