How to ADD/Clone columns into the existing IgGrid in a button click on the page

Question

I am trying to clone the iggrid/ appending/adding multiple rows to the end of the iggrid in a button click. Like there is a button called "Add additional Row" to add the iggrid.

How can we implement the column adding functionality to the iggrid.

Controller

[HttpGet]
public JsonResult GetMethod()
{
try
{
var result = new[] {
new { A = "123456" ,B="Test", C = "Buy", D = "Symbol", E = "Full", F = "Dollar", G = "$11", H = "Exch", I = "Exc", J = "12/19/2020 13:44:25", K = "System", L = "123", M="S" },
new { A = "123456", B="Test", C = "Buy", D = "Symbol", E = "Full", F = "Dollar", G = "$10", H = "Exch", I = "Exc", J = "12/19/2020 13:44:25", K = "System", L = "123", M="S"},
new { A = "123456", B="Test", C = "Buy", D = "Symbol", E = "Full", F = "Shares", G = "$80", H = "Exch", I = "Exc", J = "12/19/2020 13:44:25", K = "System", L = "123", M="A"},
}.ToList();

var data = JsonConvert.SerializeObject(result, Formatting.Indented, new IsoDateTimeConverter());
return Json(data, JsonRequestBehavior.AllowGet);
}
Catch(Exception ex)
{
throw ex;
}

CSHTML

<table id="grid"></table>

JS

 var populateReviewGrid = function (bindingData) {
        $(#grid).igGrid({
            dataSourceType: "json",
            defaultColumnWidth: "20%",
            autoGenerateColumns: false,
            primaryKey: "Id",
            responseContentType: "application/json; charset=utf-8",
            width: "100%",
            rowVirtualization: true,
            virtualizationMode: "continuous",
            height: "350px",
            autoCommit: true,
            enableUTCDates: false,
            columns: [
                
                { headerText: "A", key: "A", dataType: "string" },
                { headerText: "B", key: "B", dataType: "string" },
                { headerText: "C", key: "C", dataType: "string" },
                { headerText: "D", key: "D", dataType: "string" },
                { headerText: "E", key: "E", dataType: "string"},
                { headerText: "F", key: "F", dataType: "string" },
                { headerText: "G", key: "G", dataType: "string"},
                { headerText: "H", key: "H", dataType: "string"},
                { headerText: "I", key: "I", dataType: "string"},
                { headerText: "J", key: "J", dataType: "date", columnCssClass: "right", format: "MM/dd/yyyy HH:MM:SS" },
                { headerText: "K", key: "K", dataType: "string"},
                { headerText: "L", key: "L", dataType: "string"},
                { headerText: "M", key: "M", dataType: "string" },
            ],
            dataSource: bindingData,
            features: [
                {
                    name: "Sorting",
                    type: "local",
                },
                {
                    name: "Filtering",
                    mode : "simple",
                },
                {
                    name: "Tooltips",
                    visibility: "overflow",
                },
                {
                    name: "Paging",
                    type: "local",
                    pageSize: 5
                }
            ],
        });

    }

here we can see the iggrid but I couldint able to add additional rows in a button click outside from the grid.

How can we add additional rows in a button click.

the grid feature for adding multiple rows will not work in my case. so I canot use the grid functionality like

features: [
            {
                name: "Updating",
                locale: {
                    addRowLabel: "Add new unit..."
                },
            }

Is there any other solutions for implementing this hange?