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}">
        <div data-bind="text: $parent.id"/>
        <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>
<button data-bind="click: currentSec.addField">Add Field to Section</button>

CSS

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

JavaScript

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

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

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

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