JSFiddle - React, Tailwind, and code Playground

by nemesv

HTML

Cities
<ul data-bind="foreach: CityListCollection">
    <li data-bind="text: name"/>
</ul>
Locations
<ul data-bind="foreach: LocationCollection">
    <li data-bind="text: name"/>
</ul>
FilteredCityList 
<ul data-bind="foreach: FilteredCityList">
    <li data-bind="text: name"/>
</ul>

<button data-bind="click: addLocation" >Add location</button>

JavaScript

var vm = function() {

    var self = this;
    self.CityListCollection = ko.observableArray();
    self.LocationCollection = ko.observableArray();

    self.FilteredCityList = ko.computed(function() {
        var filteredCollection = ko.utils.arrayFilter(self.CityListCollection(), function(r) {
            var matchingItem = ko.utils.arrayFilter(self.LocationCollection(), function(r1) {
                return r1.LocationCode() == r.LocationCode();
            });
            if (matchingItem.length > 0) {
                return false;
            }
            return true;
        });
        return filteredCollection;
    }, this);
    
    var locationCounter = 2;

    self.addLocation = function() {
        viewModel.LocationCollection.push(new location(locationCounter, "location " + locationCounter));
        locationCounter+= 1;
    }

}

var city = function(code, name) {
    this.LocationCode = ko.observable(code);
    this.name = ko.observable(name);
};

var location = function(code, name) {
    this.LocationCode = ko.observable(code);
    this.name = ko.observable(name);
};

var viewModel = new vm();

viewModel.CityListCollection.push(new city(1, "city one"));
viewModel.CityListCollection.push(new city(2, "city two"));
viewModel.CityListCollection.push(new city(3, "city three"));

viewModel.LocationCollection.push(new location(1, "location one"));

ko.applyBindings(viewModel);