I am using the HTML widget for Elementor, a Wordpress theme builder. I am trying to show/hide sections (sect1 - sect12 named HTML, CSS, Javascript and Node) when I click on certain buttons (btn1, btn2, btn3, named Frontend Developer, Backend Developer and Designer), and I got it to work, but when I refresh the page the buttons become unclickable. Each button controls 4 sections, so btn1 -> sect1 - sect4, btn2 -> sect5 - sect8, btn3 -> sect9 - sect 12.

<script>
.elementor-editor-active .hidden{
  display:block;
}
.hidden{
  display:none;
}
.shown{
  display: block !important;
  animation: fade_in_anim 0.5s;
}
.btn_active_state{
  background-color: #D9D3FF !important;
}
@keyframes fade_in_anim {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
const buttons = [...document.querySelectorAll("[id^='btn']")]
const mapping = [[0, 4], [4, 8], [8,12]]
const sections = [...document.querySelectorAll("[id^='sect']")]

for(let i = 0; i < 3; i++) {
  buttons[i].addEventListener('click', function(event) {
    event.preventDefault();
    toggleDivs(this)
    for(let j = mapping[i][0]; j < mapping[i][1]; j++) {
      sections[j].classList.add("shown", "fade")
    }
  })
}

function toggleDivs(btn){
  buttons.forEach(b => b.classList.remove("btn_active_state"))
  btn.classList.add("btn_active_state")
  sections.forEach(s => s.classList.remove('shown'))
}

//force button1 state initialise, if required
btn1.focus();
btn1.click();
</script>
<style>
.elementor-editor-active .hidden{
  display:block;
}
.hidden{
  display:none;
}
.shown{
  display: block !important;
  animation: fade_in_anim 0.5s;
}
.btn_active_state{
  background-color: #D9D3FF !important;
}
@keyframes fade_in_anim {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
</style>