How to clone a HeavySelect2Widget ?

[holri]

I have a function, that clones a formset row with HeavySelect2Widgets. After cloning the new widget uses the old dependentFields value for the Ajax call to get the options, although the attributes and data of the new element is updated.
What I am doing wrong?

 
 function duplicateRow(button) {
    var row = button.closest('.form-row');
    var totalForms = document.getElementById('id_form-TOTAL_FORMS');
    var formRegex = /form-(\d+)-/;
    var newFormIndex = totalForms.value;

    // Save the configurations and selected options of the original select elements within the row
    var originalSelects = row.querySelectorAll('select');
    var selectStates = Array.from(originalSelects).map(function(select) {
        var selectData = $(select).data('select2');
        return {
            selectedOptions: Array.from(select.selectedOptions).map(option => option.value),
            config: selectData ? $.extend(true, {}, selectData.options.options) : {}
        };
    });

    // Destroy Select2 instances on the original select elements within the row
    originalSelects.forEach(function(select) {
        $(select).select2('destroy');
    });

    // Clone the row
    var newRow = row.cloneNode(true);

    // Update the name, id, and data-select2-dependent-fields attributes for input and select fields within the new row
    var inputs = newRow.querySelectorAll('input, select');
    inputs.forEach(function(element, index) {
        var oldName = element.getAttribute('name');
        var oldId = element.getAttribute('id');

        var newName = oldName.replace(formRegex, 'form-' + newFormIndex + '-');
        element.setAttribute('name', newName);

        var newId = oldId.replace(formRegex, 'form-' + newFormIndex + '-');
        element.setAttribute('id', newId);
    });

    var selects = newRow.querySelectorAll('select');
    selects.forEach(function(element, index) {
        var oldDependentFields = element.getAttribute('data-select2-dependent-fields');
        if (oldDependentFields) {
            var newDependentFields = oldDependentFields.replace(formRegex, 'form-' + newFormIndex + '-');
            element.setAttribute('data-select2-dependent-fields', newDependentFields);
            $(element).data('select2-dependent-fields', newDependentFields);
        }
        element.setAttribute('data-field_id', element.getAttribute('id'));

        // Restore the selected options for select elements within the new row
        var state = selectStates[index];
        if (state) {
            Array.from(element.options).forEach(function(option) {
                option.selected = state.selectedOptions.includes(option.value);
            });
        }
    });
    // Insert the new row after the original row
    row.after(newRow);

    // Reinitialize Select2 on the original and cloned select elements within the rows
    var rowsToProcess = [row, newRow];
    rowsToProcess.forEach(function(row) {
        var selectsInRow = row.querySelectorAll('select');
        selectsInRow.forEach(function(select, index) {
            var state = selectStates[index];
            if (state && state.config) {
                // Apply the saved configuration to the select element
                $(select).djangoSelect2(state.config);
            } else {
                $(select).djangoSelect2();
            }
        });
    });

    // Update the total forms count
    totalForms.value = parseInt(totalForms.value) + 1;
}