JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <ul>
<!-- ko foreach: {data: cities, as: 'city'} -->
    <li><input data-bind="value: city.name"/><span data-bind="text: city.name"></span></li>
    <ul>
    <!-- ko foreach: {data: neighborhoods, as: 'neighborhood'} -->
        <li><input data-bind="value: name"/><span data-bind="text: name"></span></li>
    <!-- /ko -->
    </ul>
    <button data-bind="click: showCities">
    puto
    </button>
<!-- /ko -->
</ul>
</body>

CSS

a {
    color: blue;
}

JavaScript

var sf = {
	name: ko.observable('San Francisco'), 
  neighborhoods: ko.observableArray([]),

  addNeighborhoods: function(){
  	var self= this;
    
    self.neighborhoods.push(new neighborhood('Haight'));
    self.neighborhoods.push(new neighborhood('Bayview'));
    self.neighborhoods.push(new neighborhood('Marina'));
  },
  showCities: function(){debugger;
  var self= this;
  for(i=0;i<self.neighborhoods().length;i++){
  	console.log(self.neighborhoods()[i].name());
    }
  }
};
var ny = {
	name: ko.observable('New York'), 
  neighborhoods: ko.observableArray([]),
  
  addNeighborhoods: function(){
  	var self= this;
    
    self.neighborhoods.push(new neighborhood('Hells Kitchen'));
    self.neighborhoods.push(new neighborhood('Times Square'));
  },
  showCities: function(){debugger;
  var self= this;
  for(i=0;i<self.neighborhoods().length;i++){
  	console.log(self.neighborhoods()[i].name());
    }
  }
};

function neighborhood(name) {
 this.name = ko.observable(name);
}

var cities = ko.observableArray([sf, ny]);
var viewModel = {
    cities: cities,
}
sf.addNeighborhoods();
ny.addNeighborhoods();

ko.applyBindings(viewModel);