How to show/hide different forms based on a button selected

JavaScript
1

Hello everyone, I currently have 3 buttons on front page and 3 forms(shortcode) on register page. What I want to do is I would like to only show one of the forms corresponding to the selected button on the front page.

Here is my button codes on front page

Button 1
`<div onclick="RegisterNewLevel('button1');">
<span class="button button_theme button_js" style="cursor: pointer;">Get started</span></div>`

Button 2
<div onclick="RegisterNewLevel('button2');"> <span class="button button_theme button_js" style="cursor: pointer;">Get started</span></div>

Button 3
`<div onclick="RegisterNewLevel('button3');">
<span class="button button_theme button_js" style="cursor: pointer;">Get started</span></div>`
```````````````````````````````````````````````````````````````````````````````````````````````````````````````````````
Here is my forms(shortcode) on front page
```````````````````````````````````````````````````````````````````````````````````````````````````````````````````````
`[forms id="301"]`

[forms id="302"]

`[forms id="303"]`
```````````````````````````````````````````````````````````````````````````````````````````````````````````````````````
Any help will be appreciated. Thanks.
2

You can use
HTML

<button id="f1">form 1</button><button id="f2">form 2</button><button id="f3">form 3</button>
<form id="form1">
  <input type="text" placeholder="form 1">
  <button>form 1</button>
</form>
<form id="form2" style="display: none">
  <input type="text" placeholder="form 2">
  <button>form 2</button>
</form>
<form id="form3" style="display: none">
  <input type="text" placeholder="form 3">
  <button>form 3</button>
</form>

CSS

form{
  width: 200px;
  border: solid #ccc 1px;
  padding: 10px;
}

JS

document.getElementById('f1').addEventListener('click', () => {
  document.getElementById('form2').style.display = 'none';
  document.getElementById('form3').style.display = 'none';
  document.getElementById('form1').style.display = 'block';
})
document.getElementById('f2').addEventListener('click', () => {
  document.getElementById('form1').style.display = 'none';
  document.getElementById('form3').style.display = 'none';
  document.getElementById('form2').style.display = 'block';
})
document.getElementById('f3').addEventListener('click', () => {
  document.getElementById('form2').style.display = 'none';
  document.getElementById('form1').style.display = 'none';
  document.getElementById('form3').style.display = 'block';
})