Refresh grid after ajax insert

function estimate_item_Onchange(id){
    console.log("OK, estimate item selected.");
    var estimate_item_id = $('#estimate_item' + id).val();
    console.log(estimate_item_id);
    //hide select
    $($('#estimate_item' + id)).hide();
    //reset select options
    $('#estimate_item').val("");
    let areaId = id;
    console.log(areaId)
    let data = {estimateItemId: estimate_item_id, areaId: areaId};
    //get the CSRF token
    let csrfToken =$('[name = "_token"]').val();

    $.ajax({
        url: '/assigned_estimate_items/post',
        type: 'POST',
        data: {_token: csrfToken, data: data},
        dataType: 'JSON',
        success: function (data) {
            var area_id = data.data.areaId;
            var record = data.data;
            var gridname = 'grid' + area_id;
            console.log(grid39);
            console.log(grid39.dataSource);
            console.log(gridname);
            console.log(gridname.dataSource);
            gridname.insert(record);
        },
        error: function (e) {
            console.log('error message'.e);
        }
    });
}

So

I have tried several different avenues, but the error is always some version of:

2:1033 Uncaught TypeError: gridname.insert is not a function
    at Object.success (2:1033)
    at c (jquery-3.4.1.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-3.4.1.min.js:2)
    at l (jquery-3.4.1.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery-3.4.1.min.js:2)

Part of the problem might be that the grid name has to be 'built'...but I get the same error even with using 

the grid's name directly (which of course I can only do during development).

document.getElementById('grid' + area_id).ej2_instances[0].addRecord(record);

This is the error message:

2:1034 Uncaught TypeError: Cannot read property 'ej2_instances' of null

Thanks for your help,

Mark