JSFiddle - React, Tailwind, and code Playground

HTML

<div id="toolbar">
    <button id="btn1">
        Toolbar Button 1
    </button>
    <button id="btn2">
        Toolbar Button 2
    </button>
</div>

<button id="toggle">Toggle Toolbar</button>

JavaScript

var disableToolbarFunc = function(e){
    e.stopPropagation();
}
    
var toolbarOn = true;
document.getElementById("toggle").addEventListener("click", function(){
    if(toolbarOn){
        alert("Turning Toolbar Off");
        document.getElementById("toolbar").addEventListener("click", disableToolbarFunc, true);
        toolbarOn = false;
    }else{
        alert("Toggling Toolbar On");
        document.getElementById("toolbar").removeEventListener("click", disableToolbarFunc, true);
        toolbarOn = true;
    }
}, false);

document.getElementById("btn1").addEventListener("click", function(event){
    alert("You Clicked Btn 1");
}, false);
document.getElementById("btn2").addEventListener("click", function(event){
    alert("You Clicked Btn 2");
}, false);