JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/i18n/grid.locale-en.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.src.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="https://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/css/ui.jqgrid.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
 <table id="list"><tr><td></td></tr></table>
    <div id="pager"></div>

JavaScript

//<![CDATA[
        /*global $ */
        /*jslint unparam: true */
        $(function () {
            "use strict";
             $.jgrid.no_legacy_api = true;
       			 $.jgrid.useJSON = true;

            var countries = { "UsId": "US", "UkId": "UK" },
                statesOfUS = { "AlabamaId": "Alabama", "CaliforniaId": "California", "FloridaId": "Florida", "HawaiiId": "Hawaii" },
                statesOfUK = { "LondonId": "London", "OxfordId": "Oxford" },
                states = $.extend({}, statesOfUS, statesOfUK),
                allCountries = $.extend({"": "All"}, countries),
                allStates = $.extend({"": "All"}, states),
                // the next maps provide the states by ids to the contries
                statesOfCountry = {
                    "": states,
                    "UsId": statesOfUS,
                    "UkId": statesOfUK
                },
               mydata = [
                    { id: "10", country: "UsId", state: "AlabamaId", name: "Louise Fletcher" },
                    { id: "20", country: "UsId", state: "FloridaId", name: "Jim Morrison" },
                    { id: "30", country: "UkId", state: "LondonId",  name: "Sherlock Holmes" },
                    { id: "40", country: "UkId", state: "OxfordId",  name: "Oscar Wilde" }
                ],

                lastSel = -1,
                grid = $("#list"),
                removeTheOptionAll = function (elem) {
                    // We use value:allCountries and value:allStates in the searchoptions.
                    // The option {"": "All"} neams "No filter" and should be displayed only
                    // in the searching toolbar and not in the searching dialog.
                    // So we use dataInit:removeTheOptionAll inside of searchoptions to remove
                    // the option {"": "All"} in case of the searching dialog
                    if (typeof elem === "object" && typeof elem.id === "string" && elem.id.substr(0, 3) !== "gs_") {
     ...