JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js" ></script>

<div id="first">
<button data-bind="click: toggleColumn">Click me!</button>
</div>
<ul id="list_test">
    <!-- ko foreach: list -->
    <li data-bind="text: $data.ColName"></li>
    <!-- /ko -->
</ul>

JavaScript

function ViewModel(){
    var self = this;
    self.showColumn = ko.observable(true);
    self.toggleColumn = function(){
        self.showColumn(!self.showColumn());
    };
    
    self.ListOfObjects = [
        {ColName: 'test1', visible: self.showColumn},
        {ColName: 'test2'},
        {ColName: 'test3', visible: self.showColumn},
        {ColName: 'test4'},
        {ColName: 'test5'},
    ];
    
};
        
function TestViewModel(params){
        var self = this;
        self.list = ko.observableArray();
        for(var i = 0; i < params.length; i++){
            var obj = params[i];
            if(!obj.visible){
                //obj.visible = ko.observable(true);
            }
        
            if(obj.visible){
                obj.visible.subscribe(function(){
                        var elements = $('li');
                        for(var i = 0; i < elements.length; i++){
                            if($(elements[i]).text() == obj.ColName){
                                $(elements[i]).hide();
                            }
                        }
                    });
            }
        
            self.list.push(obj);
       }
}

function initViewModel(){
    
    var mod = new ViewModel();
    ko.applyBindings(new TestViewModel(mod.ListOfObjects), document.getElementById("list_test"));
    ko.applyBindings(mod,  document.getElementById("first"));
    
    
}

initViewModel();