JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<ul data-bind="foreach: { data: products, as: 'level1' }">
  <li>
    <span data-bind="text: name"></span>
    <ul data-bind="foreach: { data: items, as: 'level2' }">
      <li>
        <span data-bind="text: name"></span>
        <ul data-bind="foreach: { data: items, as: 'level3' }">
          <li>
            <span data-bind="text: name"></span> - lvl1: 
            <span data-bind="text: $parentContext.$parentContext.$index()"></span> - lvl2:
            <span data-bind="text: $parentContext.$index()"></span> - lvl3:
            <span data-bind="text: $index()"></span>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

JavaScript

var viewModel = function () {
	var self = this;
  
  var Product = function (name, products) {
  	var pSelf = this;
    pSelf.name = ko.observable(name);
    pSelf.items = ko.observableArray(products);
  };
  
  self.products = ko.observableArray([
  	new Product("product1", [
    	new Product("product1a", [
      	new Product("product1aI", []),
        new Product("product1aII", []),
        new Product("product1aIII", []),
      ]),
      new Product("product1b", [
      	new Product("product1bI", []),
        new Product("product1bII", []),
        new Product("product1bIII", []),
      ]),
      new Product("product1c", [
      	new Product("product1cI", []),
        new Product("product1cII", []),
        new Product("product1cIII", []),
      ]),
    	]),
    new Product("product2", [
    	new Product("product2a", [
      	new Product("product2aI", []),
        new Product("product2aII", []),
        new Product("product2aIII", []),
      ]),
      new Product("product2b", [
      	new Product("product2bI", []),
        new Product("product2bII", []),
        new Product("product2bIII", []),
      ]),
      new Product("product2c", [
      	new Product("product2cI", []),
        new Product("product2cII", []),
        new Product("product2cIII", []),
      ]),
    	]),
    new Product("product3", [
    	new Product("product3a", [
      	new Product("product3aI", []),
        new Product("product3aII", []),
        new Product("product3aIII", []),
      ]),
      new Product("product3b", [
      	new Product("product3bI", []),
        new Product("product3bII", []),
        new Product("product3bIII", []),
      ]),
      new Product("product3c", [
      	new Product("product3cI", []),
        new Product("product3cII", []),
        new Product("product3cIII", []),
      ]),
    	])
  ]);
};

ko.applyBindings(new viewModel());