JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.jsviews.com/download/jsviews.js"></script>
<script id="view" type="text/x-jsrender">
    {^{for selectedScenario^instances}}
         <div>{^{:name}}</div>
    {{/for}}
    
    {^{for scenarios}}
        <a href="javascript:void(0)">{{:name}}</a><br />
    {{/for}}
</script>

<div id="app"></div>

JavaScript

var scenarios = [
	{
		id: 0,
        name: "Scenario 1",
		instances: [
            {name:"1"},
            {name:"2"}
        ]
	},
	{
		id: 1,
        name: "Scenario 2",
		instances: [
            {name:"3"},
            {name:"4"}
        ]
	}
];

var data = {
    scenarios: scenarios,
    selectedScenario: scenarios[0]
};

$.observable(data).observeAll(function (ev, eventArgs) {
	console.log(ev, eventArgs);
});

$.templates("#view").link("#app", data);

$("a").on("click", function () {
    $.observable(data).setProperty("selectedScenario", $.view(this).data);
});