JSFiddle - React, Tailwind, and code Playground

by shriek

HTML

<div>
		<span data-bind="foreach: amount">
			<span data-bind="foreach: $root['data'+$index()]">
				<p data-bind="text:$data"></p>
		</span>
		</span>
		<button data-bind="click: bindOneByOne" value="Populate">Populate/Change</button>
		<button data-bind="click: changeValues" value="Mutate">Mutate</button>
	</div>

JavaScript

var VM = function(){
		var self = this;
		self.amount = ko.observableArray();
		self.data0 = ko.observable([10,11,12]);
		self.data1 = ko.observable([1,2,3]);
		self.data2 = ko.observable([3,4,5]);
		self.data3 = ko.observable([6,7,8]);
		self.data4 = ko.observable([9,10,11]);
		self.bindOneByOne = function(){
			var self = this;
			var i = 0;
			while(self['data' + i]){
				for(var j = 0, len = self['data'+i]().length; j < len; j++){
					self['data'+i]()[j] *= 2; 
				}
				console.log(self['data'+i]());
				self.amount.push(i);
				i++;
			}
		};
		self.changeValues = function(){
			var i = 0;
			while(self['data' + i]){
				setTimeout(self['data' +i].valueHasMutated(),1000);
				i++;
			}
		}
	};
	myVM = new VM();
	ko.applyBindings(myVM);