JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/start/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<table id="list"></table>
<div id="pager"></div>

JavaScript

$(document).ready(function () {
    function updateActiveStatus(rowid, isToActive) {
        alert('calling the function');
        
        $("#list").jqGrid('setRowData', rowid, {
            col: 'A',
            IsActive1: false,
            IsActive: false
        });
        var item = $("#list").jqGrid('getLocalRow', rowid);
        // delete unneeded IsActive1 property created in the item
        delete item.IsActive1;
    }

    var myData = [
            { "id": "35", "firstname": null, "codeval": "G", "note": "xx7866", "amount": "23", "IsActive": true },
            { "id": "73", "firstname": null, "codeval": "W", "note": "dd1047", "amount": "34", "IsActive": true },
            { "id": "75", "firstname": "LORA", "codeval": "H", "note": "rr7323", "amount": "56", "IsActive": true },
            { "id": "95", "firstname": "EST", "codeval": "M", "note": "gg574", "amount": "55", "IsActive": true }
        ],
        myGrid = $("#list"),
        activeButton = '<div style="padding-left:5px;"><button class="ui-button ui-widget ui-state-default app-custom-button-activate" >' +
            '<span title="" class="ui-button-icon-primary ui-icon ui-icon-check"></span>Activate' +
            '</button></div>',
        retireButton = '<div style="padding-left:5px;"><button class="ui-button ui-widget ui-state-default app-custom-button-retire" >' +
            '<span title="" class="ui-button-icon-primary ui-icon ui-icon-scissors"></span>Retire' +
            '</button></div>';

    myGrid.jqGrid({
        datatype:'local',
        data: myData,
        colNames: ['ID', 'FirstName', 'Code', 'Amount', 'Note', 'Status','Action'],
        colModel:[
            { name: 'id', width:70, align: 'center', sorttype: 'int'},
            { name: 'firstname', width: 80, align: 'center'},
            { name: 'codeval',  width: 70 },
            { name: 'amount', width: 100, formatter: 'number'},
            { name: 'note', width: 100, sortable: false},
            {
            ...