JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div id="mydiv">
    <div id="listView" data-template="my-list-template"
         data-bind="source: items">
    </div>
</div>
<button id="test">Click</button>

<script id="my-list-template" type="text/x-kendo-template">   
    <div>
        <div data-bind="text: name"></div> 
        <div id="accordion" data-template="accordion-template"
            data-bind="source: items">
        </div>
        <hr>
    </div>
</script>

<script id="accordion-template" type="text/x-kendo-template">   
    <div>
        <div data-bind="text: name" style="padding-left:20px"></div>         
    </div>
</script>

JavaScript

function updateModel() {

};

var viewModel = kendo.observable({
    name: "Food", inputValue: "food",
    items: [
        { name: "Food", inputValue: "food", items : [{name: "Food11", inputValue: "food11"}, {name: "Food12", inputValue: "food12"}]}, 
        { name: "Merchant", inputValue: "merchant", items : [{name: "Food21", inputValue: "food21"}, {name: "Food22", inputValue: "food22"}]}, 
        { name: "Bills", inputValue: "bills" , items : [{name: "Food31", inputValue: "food31"}, {name: "Food32", inputValue: "food32"}]}
    ]    
    });            
$(document).ready(function(){       
    kendo.bind($("#mydiv"), viewModel);
    $("#test").click(function(){
        var newItem = {name: "Food777", inputValue: "food777"};
        var items = viewModel.get("items[0].items");
        items.push(newItem);        
    });
});