multiple values in footer Row jqgrid

Question

The JQgrid I have is generated through JavaScript as I have to show a calendar and corresponding values in it from the JSON. The problem I have is I have to show a count of all the values in the column at the bottom for which I thought Footer row would be a good option.

But the issue is that I am not able to use JavaScript to populate the footer row with the totals of all the values in that column.I want to iterate on the column names and fill each column with its value.

HTML:

<table id="jqGrid"></table>

JavaScript

$(document).ready( function () {


Date.prototype.addDays = function(days) {
    var dat = new Date(this.valueOf());
    dat.setDate(dat.getDate() + days);
    return dat;
};
function GenerateColumns(startDate, stopDate, col, columnType, data) {
    var dateArray = col;
    var currentDate = startDate;
    if(columnType === "cn") {
        while (currentDate <= stopDate) {
            dateArray.push(moment(currentDate).format('ddd DD'));
            currentDate = currentDate.addDays(1);
        }
    } else {
        var i = 0;
        while (currentDate <= stopDate) {
            dateArray.push({"name": moment(currentDate).format('ddd DD') , "index" : moment(currentDate).format('ddd DD')});
            currentDate = currentDate.addDays(1);
            i++;
        }
    }
    return dateArray;
}

function countBaseline (columnNames) {
    var actualBaseline = [];

    columnNames.forEach (function (colnm, index) {

        if (index > 3) {

            var mydata = $("#jqGrid").jqGrid("getGridParam", "data"),
                myColumn = $.map(mydata, function (item) {
                    return item[colnm];
                });
            var  i = 0;
            for (var j = 0; j < myColumn.length;j ++ ) {
                if (myColumn[j] !== "NONE") {
                    i++;
                }
            }
            actualBaseline.push(i);
            return;
        }
    });

    return actualBaseline;
}


var $grid = $("#jqGrid");
var cm = [
    {name:'EmployeeID',index:'EmployeeID', width:65, sorttype: "int", editable:false,editoptions:{readonly:true,size:10}  },
    {name:'FirstName', formatter: function (cellvalue, options, rowObject) {
        return cellvalue + ' ' + rowObject.LastName;
    }            },
    {name:'EmployeeType'},
    {name: 'Competencies'}
];


var cn = ['_id','Name', 'type', 'Competencies'];
$.ajax({
    url: 'assets/data/scheduler2.json',
    error: function (err, res) {
        console.log("test");
    },
    success: function (result ) {
        var startDate, days;
        var endDate = moment(result.StartDate).add(result.rows[0].Days.length, 'day');
        var day;
        var columnNames  = GenerateColumns(moment(result.StartDate)._d, endDate._d, cn, "cn"),
            columnModels = GenerateColumns(moment(result.StartDate)._d, endDate._d, cm, "cm", result.rows);

        var width = $grid.closest(".ui-jqgrid").parent().width();
        $grid.jqGrid({
            datatype: 'jsonstring',
            datastr: result,
            jsonReader: {
                repeatitems: false
            },
            colNames: columnNames,
            colModel: columnModels ,
            width: 1880,
            height: 450,
            rowList:[10,20,30],
            pager: '#jqGridPager',
            sortname: 'id',
            viewrecords: true,
            rowNum: 150,
            sortorder: "desc",
            caption: result.ScheduleName,
            footerrow : true,
            userDataOnFooter : true, // use the userData parameter of the JSON response to display data on footer
        });
        var names = columnNames,
            data= result.rows;
        var mydata = [];

        for (var i = 0; i < data.length; i++) {
            mydata[i] = {};
            for (var j = 0; j < data[i].Comp.length - 1; j++) {
                mydata[i][names[j + 4]] = data[i].Comp[j];
                if (names[j + 4].split(" ")[0] === "Sat" || names[j + 4].split(" ")[0] === "Sun")
                    $('#jqGrid').jqGrid('setCell',i, names[j + 4],"",{'background-color':'#AFEEEE', 'background-image':'none'});
            }
        }

        for (var k = 0; k <= mydata.length; k++) {
            $("#jqGrid").jqGrid('setRowData', k + 1, mydata[k], "first");
        }

        var actual = countBaseline(columnNames);
        var i = 0;
        columnNames.forEach (function (colnm, index) {
            if (i > 3) {
                $grid.jqGrid(
                    "footerData",
                    "set",
                       {colnm: actual[index]}
                    //{"Sun 06": actual[index]}
                    // {"Sun 06": 54   }
                );
            }
            i++;
        });
    }

  });
});

The main code is the last one, Where I have baseline which is an array of numbers of which I want to populate each value with a corresponding column. What happening is if you see the commented lines "set footerData" is only writing the value on one column but not writing values on all the columns with forEach.

         var baseline = countBaseline(columnNames);
        var i = 0;
        columnNames.forEach (function (colnm, index) {
            if (i > 3) {
                $grid.jqGrid(
                    "footerData",
                    "set",
                        {colnm: baseline[index]}
                   // {"Sun 06": baseline[index]}
                    // {"Sun 06": 54   }
                );
            }
            i++;
        });

What I want to achieve: