JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<div id="ed_costGrid" style="margin-bottom:10px;"></div>
<div id="ed_grid" style="margin-bottom:10px;"></div>

JavaScript

var productDs = new kendo.data.DataSource({
    schema: {
        model: {
            fields: {
                accountId: {type: "string", editable: false},
                product: {type: "string", editable: false}
            }
        }
    }
});    

var feeDs = new kendo.data.DataSource({
    schema: {
        model: {
            fields: {
                fee: {type: "string", editable: false},
                amount: {type: "number", editable: false}
            }
        }
    }
});
    
$("#ed_grid").kendoGrid({
    selectable: false,
    height: "171px",
    dataSource: {
        schema: {
        model: {
            fields: {
                accountId: {type: "string", editable: false},
                product: {type: "string", editable: false}
            }
        }
    }
    },
    editable: true,
    toolbar: [
        {text: "New Loan", className: "add-loan", imageClass: "k-add"},
        {text: "New Woring Capital", className: "add-wc", imageClass: "k-add"}
    ],
    columns:[
        {
            field: "accountId",
            title: "Account ID",
            width: "110px"
        },
        {
            field: "product",
            title: "Product",
            width: "110px"
        }
    ]
});
    
$('#ed_costGrid').kendoGrid({
    selectable: false,
    height: "151px",
    dataSource: {
        schema: {
        model: {
            fields: {
                fee: {type: "string", editable: false},
                amount: {type: "number", editable: false}
            }
        }
    }
    },
    editable: true,
    toolbar: [
        {text: "Add Fee/Cost", className: "add-fee", imageClass: "k-add"}
    ],
    columns:[
        {
            field: "fee",
            title: "Fee/Cost Type"
        },
        {
            field: "amount",
            title: "Amount"
        }
    ]
});
    
$('#ed_grid a.add-loan').click(function(e) {

    var dataSource = $('#ed_grid').data('kendoGrid').dataSource;
     ...