JSFiddle - React, Tailwind, and code Playground

by Bladetrick

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div id="pnlMasterInfoGrids" class="k-content">
    <div id="gridMasterInfo"></div>
</div>
<div id="pnlInnerTasksGrids" class="k-content">
    <div id="divInnerTasksGrid"></div>    
</div>
<div>
    <button id="btnAddTask">Add Task</button>
</div>

CSS

#pnlMasterInfoGrids, #gridInductedTasks {
    width : 100%;
    float: left;
}
.highlightTR {
    background-color: #99CCFF;
}

JavaScript

var gridCount = 0;
            var data = [
                { id: 1, text: "text 1", position: 1 },
                { id: 2, text: "text 2", position: 2 },
                { id: 3, text: "text 3", position: 3 },
                { id: 4, text: "text 4", position: 4 },
                { id: 5, text: "text 5", position: 5 },
                { id: 6, text: "text 6", position: 6 }
            ]

            var data_Dest = [
                { id: 11, text: "text 11", position: 1 },
                { id: 22, text: "text 22", position: 2 },
                { id: 33, text: "text 33", position: 3 }
            ]

            var data_secLevel = [
                { id: 4, text: "text 4", position: 4 },
                { id: 5, text: "text 5", position: 5 },
                { id: 6, text: "text 6", position: 6 }
            ]

            var dataSource = new kendo.data.DataSource({
                data: data,
                schema: {
                    model: {
                        id: "id",
                        fields: {
                            id: { type: "number" },
                            text: { type: "string" },
                            position: { type: "number" }
                        }
                    }
                }
            });

            var dataSourceDestination = new kendo.data.DataSource({
                data: data_Dest,
                schema: {
                    model: {
                        id: "id",
                        fields: {
                            id: { type: "number" },
                            text: { type: "string" },
                            position: { type: "number" }
                        }
                    }
                }
            });

            var dataSource_SecLevel = new kendo.data.DataSource({
                data: data_secLevel,
                schema: {
                    model: {
                        id: "id",
                        fields: {
                   ...