How to update data of child table in web form using client script

how can I use the same client script which is basically updating the value of rows in the child table from the data coming from an external API and is working for the doctype form to work with the web form client script? the data is coming but the rows are not updating

The Script:

function updateCateringLimits(frm, responseMessage) {
frappe.call({
method: ‘frappe.wis.doctype.script.get_catering_limits’,
args: {
buid: frm.doc.buid,
office_guid: responseMessage[frm.doc.officename]
},
callback: function (response) {
const cateringLimitsObj = response.message;
const cateringLimits = Object.values(cateringLimitsObj)[0];
const childTable = frm.doc.catering_limits || [];

        // Clear the child table first
        while (childTable.length) {
            frm.get_field('cateringlimits').grid.remove_row(0);
        }

        // Add the new rows to the child table
        const childTableField = frm.fields_dict['cateringlimits'];
        if (childTableField && childTableField.grid) {
            cateringLimits.forEach(cateringLimit => {
                const newRow = frm.add_child('cateringlimits');
                newRow.minpeople = cateringLimit.minPeople;
                newRow.maxpeople = cateringLimit.maxPeople;
                newRow.cutoff = cateringLimit.cutoffHrs;
            });
        }

        // Refresh the form to show the updated child table
        frm.refresh_field('cateringlimits');
    }
});

}

@rmehta