Refresh Jqgrid in PHP

I have jqgrid that need to refresh data onchange event, i create table with js and make object of jqgrid like this:

$('<table id="list2"></table>' +
    '<div id="gridpager"></div>').appendTo('#topics');
grid = jQuery("#list2");

after this, I have an ajax function to get data from the database and I put jqgrid on the success method. here is the code.

function getReport(start_date,end_date) {
    $.ajax({
        url: "logics/inventory_reports",
        type: "POST",
        data: {
            type: "getTrailBalance_report",
            start_date: start_date,
            end_date: end_date,
        },
        success: function (data) {
            let dt = JSON.parse(data);
            debugger;
            grid.jqGrid({
                datastr: dt.records,
                datatype: "jsonstring",
                height: "auto",
                loadui: "disable",
                pgbuttons : false,
                pginput : false,
                colNames: [/*"id",*/"Items","Debit", "Credit"],
                colModel: [
                    //{name: "id",width:1, hidden:true, key:true},
                    {name: "name", width:250, resizable: false,sortable: false},
                    {name: "debit",width:150,sortable: false},
                    {name: "credit",width:150,sortable: false}
                ],
                treeGrid: true,
                pager : '#gridpager',
                caption: "Trail Balance Report",
                ExpandColumn: "elementName",
                autowidth: true,

                rowNum: 10000,
                jsonReader: {
                    root: "response"
                }
            }).navGrid('#gridpager',{
                view:true,
                del:false,
                search: false,
                autoRefresh: true,
            });
            jQuery("#list2").trigger("reloadGrid");

        }
    });
}

and here is my dropdown onchange event.

<select name="time_period" id="time_period" class="form-control" onchange="getTimePeriod()">
                        <option value="0">--Select Time Period--</option>
                        <option value="cDay">Current Day</option>
                        <option value="lDay">Last Day</option>
                        <option value="cWeek">Current Week</option>
                        <option value="lWeek">Last Week</option>
                        <option value="cMonth">Current Month</option>
                        <option value="lMonth">Last Month</option>
                        <option value="cYear">Current Year</option>
                        <option value="lYear">Last Year</option>
                    </select>

here is the code of getTimePeriod() method from where I call the getReport method with passing parameters.

function getTimePeriod() {

    let timePeriod = $("#time_period").val();
    let periodDate = new Date();
    let date = new Date(), y = date.getFullYear(), m = date.getMonth();
    let message = "";
    let FYear;
    let start_date = new Date();
    debugger;
    switch (timePeriod) {

        case 'cDay':
            periodDate = new Date();
            message = 'Current Day';
            break;

        case 'lDay':
            //periodDate = new Date;
            start_date.setDate(start_date.getDate() - 1);
            periodDate.setDate(periodDate.getDate() - 1);
            // periodDate = periodDate.toISOString().slice(0, 10);
            message = 'Last Day';
            break;

        case 'cWeek':
            //periodDate = new Date;
            start_date.setDate(start_date.getDate() - (start_date.getDay() + 6) % 7); // Starting date of week
            periodDate.setDate(periodDate.getDate() - (periodDate.getDay() - 7) % 7); // Ending date of Week
            message = 'Current Week';
            break;

        case 'lWeek':
            start_date.setDate(start_date.getDate() - (start_date.getDay() + 6) % 7);// Starting date.
            start_date.setDate(start_date.getDate() - 7);
            periodDate.setDate(periodDate.getDate() - (periodDate.getDay() -  7) % 7); // Ending date.
            periodDate.setDate(periodDate.getDate() - 7);
            message = 'Last Week';
            break;

        case 'cMonth':
            start_date = new Date(y, m, 1); // Starting date of this month.
            periodDate = new Date(y, m + 1, 0); // Ending date of this month.
            message = 'Current Month';
            break;

        case 'lMonth':
            start_date = new Date(y, m - 1, 1); // Starting date of the previous Month.
            periodDate = new Date(y, m, 0); // Ending date of the previous Month.
            message = 'Last Month';
            break;

        case 'cYear':
            FYear = getFinancialYearsLastMonth();
            start_date = new Date(y, FYear, 1); // Starting date of this Financial Year.
            periodDate = new Date(y +1, FYear, 0); /*#### second value tells the month number ######*/ // Ending Date.
            message = 'Current Year';
            break;

        case 'lYear':
            FYear = getFinancialYearsLastMonth();
            start_date = new Date(y - 1, FYear, 1); // Starting date of previous Financial Year.
            periodDate = new Date(y, FYear, 0); /*#### second value tells the month number ######*/ // Ending Date
            message = 'Last Year';
            break;

    }

    // periodDate = periodDate.toISOString().slice(0, 10);
    document.getElementById("showDate").innerHTML = getDateInFormat(periodDate);
    getReport(ReFormateDate(start_date),ReFormateDate(periodDate));

}

avoid the rest code from getTimePeriod method just see the calling of getReport.

I put debugger and test that every time the data is updated but jqgrid is not refreshing the data. I tried but like jQuery(“#list2”).trigger(“reloadGrid”); and .navGrid(‘#gridpager’,{
view:true,
del:false,
search: false,
autoRefresh: true,
}); but no effected. Can you help me out with this issue, please?
Thanks!