JSFiddle - React, Tailwind, and code Playground

by enyojs

CSS

.repeater {
    border:1px solid lightblue; 
    margin:5px; 
    padding:5px;
}

.item {
    display:inline-block; 
    border:1px solid orange; 
    margin:5px; 
    padding:5px;
}

JavaScript

enyo.kind({
    name: "MySample",
    components: [
        {kind: "Repeater", count:5, onSetupItem:"setupParent", components: [
            {name:"parent", classes:"item"},
            {kind: "Repeater", classes:"repeater", count:10, onSetupItem:"setupChild", components: [
                {name:"child", classes:"item", ontap:"tapped"}
            ]}
        ]},
        {name:"result"},
    ],
    setupParent: function(inSender, inEvent) {
        inEvent.item.$.parent.setContent(inEvent.index);
    },
    setupChild: function(inSender, inEvent) {
        inEvent.item.$.child.setContent(inEvent.index);
        inEvent.item.$.child.index = inEvent.index;
        return true;
    },
    tapped: function(inSender, inEvent) {
        this.$.result.setContent(inEvent.originator.index + " tapped");
    }
});

new MySample({fit:true}).write();