JQGrid problem with dynamic columns/data

TBD

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css">
<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>
<script src="https://jquery-json.googlecode.com/files/jquery.json-2.2.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="tabs">
    <ul>
        <li><a href="#tab1">Grid 1</a>

        </li>
        <li><a href="#tab2">Grid 2</a>

        </li>
    </ul>
    <div id="tab1">
        <table id="grid1"></table>
    </div>
    <div id="tab2">
        <table id="grid2"></table>
    </div>
</div>

JavaScript

var columnLength = 10 + Math.floor(Math.random() * 10);
var dataLength = 100 + Math.floor(Math.random() * 100);
var totalPages = 100 + Math.floor(Math.random() * 100);

$(document).ready(function () {
    $("#tabs").tabs();
        
    getGridData(true, function(results) {
       console.log("In callback with results as " , results); 
        $("#grid2").jqGrid({
            datatype: "json",
            colNames: results.data.colNames,
            colModel: results.data.colModel,
            autowidth: true,
            url: "/echo/json/",
            mtype: "POST",
            serializeGridData: function(postData) {
                
                return $.param(updatedPost);
            }
        });
    });

    $("#grid1").jqGrid({
        datatype: 'local',
        colNames: ['Header1', 'Header2', 'nf1', 'nf2', 'nf3', 'nf4', 'nf5', 'nf6'],
        colModel: [{
            'name': 'frozen1',
            width: 50,
            frozen: true
        }, {
            'name': 'frozen2',
            width: 50,
            frozen: true
        }, {
            'name': 'nf1',
            width: 80
        }, {
            'name': 'nf2',
            width: 80
        }, {
            'name': 'nf3',
            width: 80
        }, {
            'name': 'nf4',
            width: 80
        }, {
            'name': 'nf5',
            width: 80
        }, {
            'name': 'nf6',
            width: 80
        }],
        width: 400,
        height: 200,
        shrinkToFit: false
    });
    $("#grid1").jqGrid('setFrozenColumns');
    fillGrid("#grid1");
    
});

function fillGrid(id) {
    for (var idx = 1; idx < 10; idx++) {
        $(id).jqGrid("addRowData", idx, {
            frozen1: 'Frozen1',
            frozen2: 'Frozen2',
            nf1: 'Free1',
            nf2: 'Free2',
            nf3: 'Free3'
        });
    }
}

function getDynamicColumns(limit) {
    var colNames = [];
    var colModel = [];

    for (var index = 0; index < limit; index++) {
     ...