JSFiddle - React, Tailwind, and code Playground

HTML

<div id="panel1">
    <h1>Panel 1<h1>
    <span data-bind="visible: isVisible">panel 1 visible change</span>
    <button data-bind="click: change1">change</button>
</div>
<div id="panel2">
     <h1>Panel 2<h1>
    <span data-bind="visible: isVisible">panel 2 visible change</span>
    <button data-bind="click: change2">change</button>
</div>

CSS

#panel1
{
    background-color: orange;
}

#panel2
{
    background-color: cyan;
}

JavaScript

var Panel1ViewModel = function Panel1ViewModel() {
    var self = this;
    
    self.isVisible = ko.observable(false);
    
    self.change1 = function() {
        self.isVisible(!self.isVisible());
    };
};
ko.applyBindings(new Panel1ViewModel(), document.getElementById('panel1'));

var Panel2ViewModel = function Panel1ViewModel() {
    var self = this;
    
    self.isVisible = ko.observable(false);
    
    self.change2 = function() {
        self.isVisible(!self.isVisible());
    };
};
ko.applyBindings(new Panel2ViewModel(), document.getElementById('panel2'));