JSFiddle - React, Tailwind, and code Playground

by pkpjpm

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<div data-bind="foreach:Categories">
    <p data-bind="text:Heading" />
    <ul data-bind="foreach:Items">
        <li data-bind="text:Name" />
    </ul>
</div>
<button id="addItem">Add Item</button>
<button id="addCategory">Add Category</button>

JavaScript

var categories = [
    {
        Heading:"Category 1",
        Items: ko.observableArray([
            { Name: "Item One" },
            { Name: "Item Two" }
        ])
    },
    {
        Heading:"Category 2",
        Items: ko.observableArray([
            { Name: "Item A" }
        ])
    }
];

var vm ={
    Categories: ko.observableArray(categories)
};

ko.applyBindings(vm);

$("#addItem").click(function(){
    vm.Categories()[1].Items.push({ Name: "Item B" });
});

$("#addCategory").on("click", function(){
    vm.Categories.push({
        Heading: "Category 3",
        Items: ko.observableArray([
            { Name: "Item i" }
            ])
    });
});