JSFiddle - React, Tailwind, and code Playground

HTML

<ul data-bind="foreach: {data: A, as: 'dataA'}">
    <li><span data-bind="text: dataA.id "></span>

    </li>
    <ul data-bind="foreach: {data: $root.B, as: 'dataB'}">
        <div data-bind="if: $root.equals(dataA, dataB)">
            <li> <span data-bind="text: dataB.other "></span>
            </li>
        </div>
    </ul>
</ul>

JavaScript

vm = {
    equals: function (a, b) {
        return a.id == b.id && a.name == b.name;
    },
    A: ko.observableArray([{
        id: "1",
        name: "name1"
    }]),
    B: ko.observableArray([{
        id: "1",
        name: "name1",
        other: "11"
    }, {
        id: "1",
        name: "name1",
        other: "12"
    }, {
        id: "2",
        name: "name1",
        other: "21"
    }])
}

ko.applyBindings(vm)