JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page0" data-bind="foreach: secs">
    <section class="section" data-bind="click: $parent.currentSec, attr: {id: id}, css: { active: $parent.currentSec() == $data }">
        <div data-bind="text: $parent.id"></div>
        <ul class="connected" data-bind="foreach: fields">
            <li data-bind="attr: {id: id}, click: $parent.currentField">New Field</li>
        </ul>
    </section>
</div>
<button data-bind="click: addSection">Add Section</button>
<!-- ko with: currentSec -->
<button data-bind="click: addField">Add Field to Section</button>
<!-- /ko -->

CSS

.section {
    border: 2px solid;
    border-radius: 5px;
}
.section:hover, .active {
    border-color: #ff0000;
}

JavaScript

function P() {
    var self = this;
    self.id = 'pageId';
    self.secs = ko.observableArray();
    self.currentSec = ko.observable();
    self.addSection = function() {
        var newSection = new S("section" + self.secs().length);
        self.currentSec(newSection);
        self.secs.push(newSection);
    }
}

function S(sid) {
    var self = this;
    self.id = sid;
    self.fields = ko.observableArray();
    self.currentField = ko.observable();
    self.addField = function() {
        self.fields.push(new F("field" + self.fields().length));
    };
}

function F(fid) {
    var self = this;
    self.id = fid;
}

var pvm = new P();
ko.applyBindings(pvm);