JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.226/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.226/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.1.226/js/kendo.all.min.js"></script>
<div id="grid"></div>

<script id="popup_editor" type="text/x-kendo-template">
    <div class="k-edit-label">
				<label for="popupDiscount">Discount</label>
			</div>
            <input type="text" class="k-input k-textbox" name="popupDiscount" data-bind="value:Discount">
</script>

JavaScript

function checkDiscount(input) {   
            var c = false;
            if (input.attr("name") == "popupDiscount") {

               max = 20;

                if (input.val() > max) {
                    
                    //if(!globalValidationFlag){
                     //   globalValidationFlag = true; 
                        c = confirm("Discount is too high. Proceed?");
                    //} else {
                    //    c = true;
                   // }
                   
                    if (c === true) {
                        
                        setTimeout(function() {
                            $("#grid").data("kendoGrid").dataSource.sync();
                       });
                        return true;
                    }
                    else {
                        input.attr("data-discountCheck-msg", "Lower discount");

                        return false;
                    }
                }
                else {

                    return true;
                }

            }        
            return true;
        }

data = [];
counter = data.length;
var dataSource = new kendo.data.DataSource({
    transport: {
        read: function (o) {
            //pass the date
            o.success(data);
        },
        create: function (o) {
            console.log(2);
            var item = o.data;
            //assign a unique ID and return the record
            counter++;
            item.Id = counter;
            o.success(item);
        },
        update: function (o) {
            console.log(1)
            o.success();
        },
        destroy: function (o) {
            o.success();
        }
    },
    schema: {
        model: {
            id: "Id",
            fields: {
                Id: {
                    nullable: false,
                    editable: false
                },

                Discount: {
                    editable: true,
                    nullable: false,
                  ...