JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div id="model">
    <div id="js-struc-doc-treeview" class="struc-doc-treeview"
        data-role="treeview"
        data-drag-and-drop="true"
        data-text-field="title"
        data-spritecssclass-field="type"
        data-template="treeview-template"
        data-bind="source: sectionsTreeDataSource"
    ></div>
</div>

<script id="treeview-template" type="text/kendo-ui-template">
    <span data-section-id="#: item.ID #" >
        <span class="section-number">#: item.stringNumber #</span>
        <span class="title">#: item.title #</span>
    </span>
</script>

JavaScript

var sectionsData = [
    {
        ID: 1,
        parentID: null,
        documentID: 2,
        number: 1,
        stringNumber: '1.',
        title: 'General',
        description: 'Test',
        isBodyExpanded: true, 
        expanded: true, 
        isNumbered: true,
        items: [],
        hasChildren: true,
    },
    {
        ID: 2,
        parentID: null,
        documentID: 2,
        number: 2,
        stringNumber: '2.',
        title: 'Environment',
        description: '',
        isBodyExpanded: true,
        expanded: true,
        isNumbered: true,
        items: [],
        hasChildren: true,
    },
    {
        ID: 3,
        parentID: 2,
        documentID: 2,
        number: 1,
        stringNumber: '2.1.',
        title: 'Eco ',
        description: 'Test',
        isBodyExpanded: true,
        expanded: true,
        isNumbered: true,
        questions: [],
        items: [],
        hasChildren: false,
    },
    {
        ID: 4,
        parentID: 2,
        documentID: 2,
        number: 2,
        stringNumber: '2.2.',
        title: 'Marks',
        description: 'Test',
        isBodyExpanded: true,
        expanded: true,
        isNumbered: true,
        questions: [],
        items: [],
        hasChildren: false,
    },
    {
        ID: 5,
        parentID: null,
        documentID: 2,
        number: 3,
        stringNumber: '3.',
        title: 'Quality',
        description: '',
        isBodyExpanded: true,
        expanded: true,
        isNumbered: true,
        questions: [],
        items: [],
        hasChildren: false,
    }
];


var sectionsTreeDataSource = new kendo.data.HierarchicalDataSource({
    transport: {
        read: function (options) {

            var treeJSON = sectionsViewModel.generateTreeJSON(sectionsData);
            options.success(kendo.observableHierarchy(treeJSON));
        },
    },
    schema: {
        data: function(data) {
            return data || [];
        },
        model: { id:...