JSFiddle - React, Tailwind, and code Playground

by jiggle

HTML

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

JavaScript

var VM = function(){
		var self = this;
		self.amount = ko.observableArray();
    self.data0 = ko.observable([ko.observable(10),ko.observable(11),ko.observable(12)]);
		self.data1 = ko.observable([ko.observable(1),ko.observable(2),ko.observable(3)]);
		self.data2 = ko.observable([ko.observable(3),ko.observable(4),ko.observable(5)]);
		self.data3 = ko.observable([ko.observable(6),ko.observable(7),ko.observable(8)]);
		self.data4 = ko.observable([ko.observable(9),ko.observable(10),ko.observable(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++){
                        
                        (function(){
                            var itemToSet = self['data'+i]()[j];
                            var jVal = j;
                            var iVal = i;
                            setTimeout(function(){
                                console.log('iVal:',iVal," ", "jval:",jVal);
                                console.log('itemToSet',itemToSet());
                                itemToSet(itemToSet() * 2);
                            },1000*(i+1));
                        })()
                    }
                    self.amount.push(i);
                    
               
				i++;
			}
		};
		self.changeValues = function(){
			var i = 0;
            var timeOut = 1000;
			while(self['data' + i]){
                
                    for(var j = 0, len = self['data'+i]().length; j < len; j++){
                        timeOut += 1000;
                        (function(){
                            var itemToSet = self['data'+i]()[j];
                            var jVal = j;
                            var iVal = i;
                            
                            console.log('timeOut',timeOut);
                            console.log('iVal:',iVal," ", "jval:",jVal);
                           ...