JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<select data-bind="options: families,
                       optionsText: 'name',
                       value: selectedFamily"></select>
<button data-bind="click: addChild">Add Child</button>
<button data-bind="click: resetChildren">Reset Children</button>
<!-- ko foreach: families -->

<h1 data-bind="text: name">Family Name</h1>

<ul>
    <!-- ko foreach: children -->
    <li> <span data-bind="text: fullName"></span>  <span data-bind="visible: $root.selectedFamily().name() === lastName()">| Selected!</span>
    </li>
    <!-- /ko -->
</ul>
<!-- /ko -->

JavaScript

function FamilyModel(name) {
    var self = this;
    self.name = ko.observable(name);
    self.children = ko.observableArray();
}

function ChildModel(firstName, lastName) {
    var self = this;
    self.firstName = ko.observable(firstName);
    self.lastName = ko.observable(lastName);
    self.fullName = ko.computed(function () {
        return self.firstName() + " " + self.lastName();
    });
}

function PageViewModel() {
    var self = this;
    self.families = ko.observableArray([
        new FamilyModel("Smith"),
        new FamilyModel("Jones"),
        new FamilyModel("Brown")
    ]);
    self.selectedFamily = ko.observable();
    self.addChild = function () {
        self.selectedFamily().children.push(new ChildModel("Frank", self.selectedFamily().name()))};
    self.resetChildren = function () {
        ko.utils.arrayForEach(self.families(), function (family) {
            console.log(family);
            console.log(family.children());
            family.children([]);
        });
    };
}

ko.applyBindings(new PageViewModel());