JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/ractive"></script>
<div id='container'></div>

<script id='myTemplate' type='text/ractive'>
    <label><input type='range' value='{{time}}' step='1' min='0' max='3'/> time <strong>{{time}}</strong></label>
    <p>(uses type='range', probably needs Chrome)</p>

		<div class='row'>
			{{#foo[time]:i}}
				<div on-click="cell-click:{{time}},{{i}}" class="cell {{ this ? 'on' : 'off' }}"></div>
			{{/foo}}
		</div>

		{{#report}}
			<p>Toggled <code>{{exprKeypath}}</code> (aka <code>{{realKeypath}}</code>)</p>
		{{/report}}

		{{^report}}
			<p>Click the buttons</p>
		{{/report}}

		<code>
		    {{#foo:i}}
            {{JSON.stringify(this)}}<br/>
            {{/foo}}
		</code>
</script>

CSS

body {
    font-family: 'Helvetica Neue', 'Arial', sans-serif;
    font-weight: 200;
}

.cell {
    padding: 1em;
    display: inline-block;
    margin: 0.2em;
}

.on {
    background-color: yellow;
}

.off {
    background-color: gray;
}

JavaScript

ractive = new Ractive({
    el: 'container',
    template: '#myTemplate',
    data: {
        foo: [
            [ false, false, true ],
            [ false, false, false ],
            [ false, true,  false ],
            [ true,  false, false ]
        ],
        time: 0
    }
});

ractive.on( 'cell-click', function ( event, time, i ) {
    var realKeypath = 'foo['+time+']['+i+']';
    
    this.toggle( realKeypath );
    
    this.set({
        exprKeypath: event.keypath,
        realKeypath: realKeypath,
        report: true
    });
});