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

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');
      }
   });
}

I am trying to update my doctype script which is updating the rows of child table in doctype form but the script in not working in the web form client script i have tried to make changes and the code is working till wher it is able to fetch the data from the api but the grid is not updating