JSFiddle - React, Tailwind, and code Playground

HTML

<div class="panel panel-default">
	<ul data-bind="foreach: plans" class="list-group">
		<li class="list-group-item">
			<span data-bind="text: id"></span>
			<span data-bind="text: count"></span>
		</li>
	</ul>
</div>

CSS

input {
    width: 100px;
}

JavaScript

console.clear();

function viewModel() { 

this.plans = ko.observableArray([]);
    
    var plans1 = [
        { id: 'GRE', count: '1111' },
        { id: 'TOEFL', count: '111' },
        ];
        
            var plans2 = [
        { id: 'GRE2', count: '222' },
        { id: 'TOEFL2', count: '22' },
        ];
        
        this.plans = plans2;
        //this.plans = plans1;
        
		setTimeout(function(){
    	console.log("In timeout before assigning plans");
      this.plans = plans1;
      console.log(this.plans);
      }, 2000);     

}

ko.applyBindings(viewModel());
// The above line equals:
// viewModel(); // updates window object and returns null!
// ko.applyBindings(); // binds window object to body!