I have a javascript that stops working when a button is not showed. How can I fix it?

I've got 4 buttons and each button opens a section and closes the other. There is a possibility that one or the buttons are stay hidden because of a switch in the backend which you can toggle to make it visible (or to hide).

Now, if one or more buttons are not visible the script stops working. If I toggle all the buttons on, the buttons display and the script is working.

I have this code and it works fine (as long as all the buttons are visible):

<style> 
.elementor-editor-active .hidden { 
    display:block; 
} 
.hidden{ 
    display:none; 
} 
.shown{ 
    display: block !important; 
} 

.btn_active_state{
background-color: #FFCC00 !important;
}
.btn_active_state a{
font-weight: bold !important;
}

</style>

<script>
var divs
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var btn4 = document.getElementById("btn4");

    btn1.onclick = function(event){
    event.preventDefault();
    toggleDivs("sect1",this);
    };

    btn2.onclick = function(event){
    event.preventDefault();
    toggleDivs("sect2",this);
    };
    

    btn3.onclick = function(event){
    event.preventDefault();
    toggleDivs("sect3",this);
    };

    btn4.onclick = function(event){
    event.preventDefault();
    toggleDivs("sect4",this);
    };

function toggleDivs(s,btn){
if(btn.classList.contains("btn_active_state")){
document.getElementById(s).classList.remove("shown");
btn.classList.remove("btn_active_state");
document.getElementById(s).classList.remove("shown");
return;
}else{
btn1.classList.remove("btn_active_state");
btn2.classList.remove("btn_active_state");
btn3.classList.remove("btn_active_state");
btn4.classList.remove("btn_active_state");
btn.classList.add("btn_active_state");
document.getElementById("sect1").classList.remove("shown");
document.getElementById("sect2").classList.remove("shown");
document.getElementById("sect3").classList.remove("shown");
document.getElementById("sect4").classList.remove("shown");
document.getElementById(s).classList.add("shown","fade");
}
}
//force button1 state initialise, if required
//btn1.focus();
//btn1.click();



</script>

The script stops working when I toggle one or more buttons to OFF (so they don't display on the front-end). I saw solutions with a Try Catch method, but I don't know (if this is the right way to fix it), where to implement it...

I am using Elementor in Wordpress to accomplish this. (HTML widget where I pasted this code and named the sections and buttons to the names named in the code).

Side note: I'm not an expert in Javascript.

Thanks advance!

While I had 4 Elementor widgets (I used this as buttons) with every widget a unique ID (#btn1, #btn2, #btn3 & #btn4). I had also 4 different Elementor sections with their own ID (#sect1, #sect2, #sect3 & #sect4). If you clicked one of the button, the respective section would display (btn1 shows sect1, btn2 shows sect2 etc..).

The standard script (posted in first place) worked fined when all the buttons (btn1, btn2 etc.) where visible (not rendered, not in the code) on the page. This is because I used the Dynamic Visibility options in the 'Advanced' tab in Elementor (Crocoblock JetEngine/Elementor Pro).

The problem arose when 1 or more buttons were missing because of the Dynamic Visibility (If a switch in the CPT turned off, it will not show the widget). The script stopped working and none of the buttons worked again.

Now, I used this code in a HTML widget and placed the HTML widget under the sections (above the sections are the widgets acting like buttons). The first part of the script gives an 'active' state to the button you click on. Assure that you set the class of the button you want to have an active state as default, to 'active':

<style> 
.elementor-editor-active .hidden { 
    display:block; 
} 
.hidden{ 
    display:none; 
} 
.shown{ 
    display: block !important; 
} 

#btn1, #btn2, #btn3, #btn4 {
    cursor: pointer;
}


.active h2  {
font-weight: bold !important;
}



</style>

<script>
var activeButton = document.getElementById("btn1");

function toggleActive(btn) {
  if (activeButton && activeButton != btn) {
    activeButton.classList.remove("active");
  }
  activeButton = btn;
  btn.classList.add("active");
}

var sect1 = document.getElementById("sect1");
var sect2 = document.getElementById("sect2");
var sect3 = document.getElementById("sect3");
var sect4 = document.getElementById("sect4");

try {
var btn1 = document.getElementById("btn1");
btn1.onclick = function(event){
    toggleActive(btn1);
    document.getElementById("sect1").classList.add("shown");
    document.getElementById("sect2").classList.remove("shown");
    document.getElementById("sect3").classList.remove("shown");
    document.getElementById("sect4").classList.remove("shown");
};
} catch (error) {
  console.log("btn1 not found on the page. Error: " + error);
}
try {
var btn2 = document.getElementById("btn2");
btn2.onclick = function(event){
    toggleActive(btn2);
    document.getElementById("sect1").classList.remove("shown");
    document.getElementById("sect2").classList.add("shown");
    document.getElementById("sect3").classList.remove("shown");
    document.getElementById("sect4").classList.remove("shown");
};
} catch (error) {
  console.log("btn1 not found on the page. Error: " + error);
}
try {
var btn3 = document.getElementById("btn3");
btn3.onclick = function(event){
    toggleActive(btn3);
    document.getElementById("sect1").classList.remove("shown");
    document.getElementById("sect2").classList.remove("shown");
    document.getElementById("sect3").classList.add("shown");
    document.getElementById("sect4").classList.remove("shown");
};
} catch (error) {
  console.log("btn1 not found on the page. Error: " + error);
}
try {
var btn4 = document.getElementById("btn4");
btn4.onclick = function(event){
    toggleActive(btn4);
    document.getElementById("sect1").classList.remove("shown");
    document.getElementById("sect2").classList.remove("shown");
    document.getElementById("sect3").classList.remove("shown");
    document.getElementById("sect4").classList.add("shown");
};
} catch (error) {
  console.log("btn1 not found on the page. Error: " + error);
}

</script>