JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<link rel="stylesheet" href="http://www.trirand.com/blog/jqgrid/themes/redmond/jquery-ui-1.8.1.custom.css">
<table id="inlineGrid"></table>
<div id="inlineGridPager" style="text-align: center"></div>

JavaScript

$.lastSelectedRow = null;
var gridData = [
    {
    id: _.uniqueId(),
    cartoonId: 3,
    cartoon: "Rocky and Bullwinkle",
    comment1: "an old cartoon",
    comment2: "but a good one"},
{
    id: _.uniqueId(),
    cartoonId: 4,
    cartoon: "Johnny Quest",
    comment1: "used to watch this",
    comment2: "very early Saturday"}
];var autocompleteSource = [
    {
    CartoonId: 1,
    value: "Deputy Dog",
    label: "Deputy Dog, about a police dog"},
{
    CartoonId: 2,
    value: "Scooby Doo",
    label: "Scooby Doo, dog with speech impediment"},
{
    CartoonId: 3,
    value: "Rocky and Bullwinkle",
    label: "Rocky and Bullwinkle, cartoon sketch comedy"},
{
    CartoonId: 4,
    value: "Johnny Quest",
    label: "Johnny Quest, Haji, and other racial stereotypes"},
{
    CartoonId: 5,
    value: "Thundar the Barbarian",
    label: "Thundar the Barbarian, sword makes schwing noise"},
{
    CartoonId: 6,
    value: "Thunder Cats",
    label: "Thunder Cats, bad day at the litter box"}
            ];

$("#inlineGrid").jqGrid({
    caption: 'SO Example',
    datatype: 'local',
    data: gridData,
    loadonce: true,
    cellEdit: true,
    cellsubmit: 'clientArray',
    editurl: 'clientArray',
    pager: $("#inlineGridPager"),
    viewrecords: true,
    height: 250,
    sortname: 'id',
    sortorder: 'asc',
    colNames: ['ID', 'CartoonId', 'Cartoon', 'Comment 1', 'Comment 2'],
    colModel: [
        {
        name: 'id',
        index: 'id',
        width: 90,
        editable: false},
    {
        name: 'cartoonId',
        index: 'cartoonId',
        width: 90,
        editable: false},
    {
        name: 'cartoon',
        index: 'cartoon',
        width: 200,
        editable: true,
        edittype: 'text',
        editoptions: {
            dataInit: function(elem) { 
                $(elem).autocomplete({
                    source: autocompleteSource,
                    select: function(event, ui){
                        var rowId =...