JSFiddle - React, Tailwind, and code Playground

HTML

<div data-bind="foreach: elements">
    <span data-bind="text: txt"></span>
    <ul data-bind="foreach: el">
        <li data-bind="text: $data, click: function() { $root.remove($data, $parent); }">
    </ul>
</div>

JavaScript

function ViewModel() {
    this.elements = ko.observableArray([{
        id: 1,
        txt: 'first',
        el: ko.observableArray(['first', 'second'])
    },{
        id: 2,
        txt: 'second',
        el: ko.observableArray(['first', 'third'])
    },{
        id: 3,
        txt: 'third',
        el: ko.observableArray(['fourth', 'fifth'])
    }]);
    
    this.remove = function(elm, parent){
        parent.el.remove(elm);
        //console.log(el);
    }
}

ko.applyBindings(new ViewModel());