How to update subform record through a widget in Zoho Creator.

How to update subform record through a widget in Zoho Creator.

Hi. 

Can I ask for help what is the correct syntax for updating records in a subform through a widget? The below code can fetch subform records. I need help with the  correct syntax I should use on the Edit function(function myfunctionEdit()) for how I can update the subform record in Creator when user edit/ add/ delete the record through the widget.


HTML CODE:
            <h3 class="section-header">Attributes</h3>
            <div class="section-box" id="dynamicAttributes">
                <!-- Existing attributes will be displayed here -->
            </div>
            <button type="button" id="addAttributeButton"><i class="fas fa-plus"></i> Add Attribute</button>

JS code:
let attributeCounter = 0;

    function deleteAttribute(counterId) {
        let attributeRow = document.getElementById('attributeRow' + counterId);
        attributeRow.remove();
    }

    function addAttributeRow(id, value) {
        attributeCounter++;
        let container = document.getElementById('dynamicAttributes');
        let attributeRow = document.createElement('div');
        attributeRow.classList.add('form-row');
        attributeRow.setAttribute('id', 'attributeRow' + attributeCounter);
        attributeRow.setAttribute('data-attribute-id', id); 
        attributeRow.innerHTML = `
            <i class="fas fa-trash-alt" onclick="deleteAttribute(${attributeCounter})"></i>
            <input type="text" class="form-input" name="attributeValue${attributeCounter}" value="${value}" placeholder="Attribute Value">
        `;
        container.appendChild(attributeRow);
    }


    function populateFormWithData(tempHolderData) {
        if (tempHolderData.Attributes && Array.isArray(tempHolderData.Attributes)) {
            tempHolderData.Attributes.forEach(attr => {
                addAttributeRow(attr.ID, attr.display_value);
            });
        }
    }

    Edit function:

    function myfunctionEdit() {
        var EditProductName = document.getElementById("UpdateProductName").value;
        var EditQuantity = document.getElementById("UpdateQuantity").value;
        var EditProductDescription = document.getElementById("UpdateProductDescription").value;

        ZOHO.CREATOR.init().then(function(data) {
            var formData = {
                "data": {  
                    "Product_Name": EditProductName,
                    "Quantity": EditQuantity,
                    "Description": EditProductDescription,
                }
            };

            var config = {
                reportName: "TempHolder_Report",
                id: tempHolderRecordId,
                data: formData
            };
            ZOHO.CREATOR.API.updateRecord(config).then(function(response) {
                if (response.code == 3000) {
                    console.log("TempHolder Record Updated successfully");
                    console.log("Response:", JSON.stringify(response, null, 2));
                }
            });
        });