JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="jqxgrid"></div>

JavaScript

$(document).ready(function () {
    test(); // here works
})

//test(); //here not works



function test() {
    // array which keeps the indexes of the edited rows.
    var editedRows = [] //new Array(); 

    var $div = $("#jqxgrid");

    var data = generatedata(20);
    var source = {
        localdata: data,
        datafields: [{
            name: 'firstname',
            type: 'string'
        }, {
            name: 'lastname',
            type: 'string'
        }, {
            name: 'productname',
            type: 'string'
        }, {
            name: 'date',
            type: 'EMAIL'
        }, {
            name: 'quantity',
        
        }, {
            name: 'price',
            type: 'number'
        }],
        datatype: "array",
        updaterow: function (rowid, rowdata, commit) {
            // that function is called after each edit.
            var rowindex = $("#jqxgrid").jqxGrid('getrowboundindexbyid', rowid);
            editedRows.push({
                index: rowindex,
                data: rowdata
            });
            console.log("after edit grid");
            console.log(editedRows);
            // synchronize with the server - send update command
            // call commit with parameter true if the synchronization with the server is successful 
            // and with parameter false if the synchronization failder.
            commit(true);
        },
        addrow: function (rowid, rowdata, position, commit) {

            console.log("insert data in database");
            // synchronize with the server - send insert command
            // call commit with parameter true if the synchronization with the server is successful 
            //and with parameter false if the synchronization failed.
            // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
            commit(true);
        },
        deleterow: function (rowid, commit) {
            //...