deleteButton.addEventListener('click', () => {
    console.log(`Delete button clicked for mapping at index ${fieldIndex}`);

    // Check if the field is the first dropdown (special case)
    if (fieldIndex === 0) {
        console.log("Resetting the first field and clearing its choices.");

        fieldDropdown.value = ""; // Clear the value
        fieldDropdown.setAttribute("placeholder", "Choose a field");
        fieldDropdown.disabled = false;

        choicesContainer.innerHTML = "";
        choicesContainer.style.display = "block";

        // Reset the JSON structure
        const findRule = ticketworkflowconditions[ruleIndex];
        if (findRule) {
            const combination = findRule.event.combination;
            combination[fieldIndex] = { field: null };

            ticketworkflowconditions[ruleIndex] = {
                ...findRule,
                event: { ...findRule.event, combination },
            };

            console.log(
                `Backend JSON updated after resetting first field: ${JSON.stringify(ticketworkflowconditions, null, 2)}`
            );
        }

        console.log("First field and choices cleared, but position retained.");
        return; // Exit cleanup logic
    }

    // For all other fields, do normal deletion
    const findRule = ticketworkflowconditions[ruleIndex];
    if (findRule) {
        const combination = findRule.event.combination;

        // Remove the field from the backend combination array
        combination.splice(fieldIndex, 1);

        // Update backend state
        ticketworkflowconditions[ruleIndex] = { ...findRule, event: { ...findRule.event, combination } };

        console.log(`Backend updated after deletion: ${JSON.stringify(ticketworkflowconditions, null, 2)}`);
    }

    // Remove field dropdown from UI
    fieldNameContainer.removeChild(fieldDropdown);
    choicesContainer.innerHTML = '';
    buttonContainer.removeChild(deleteButtonWrapper);

    // Do not remove the `buttonContainer`—recycle it!

    // Handle remaining dropdowns
    const remainingDropdowns = container.querySelectorAll('.field-name-dropdown');

    if (remainingDropdowns.length === 0) {
        // No remaining dropdowns, ensure Add button exists in the buttonContainer
        console.log("No remaining dropdowns, placing Add button in existing container.");
        if (!buttonContainer.querySelector('.add-button')) {
            addButton.disabled = false; // Enable the Add button
            buttonContainer.appendChild(addButton);
        }
    } else {
        // Dropdowns still exist, append the Add button to the last button container
        console.log("Dropdowns still exist—placing Add button next to the last dropdown.");
        const lastDropdownWrapper = remainingDropdowns[remainingDropdowns.length - 1].closest('.button-container');
        if (lastDropdownWrapper && !lastDropdownWrapper.contains(addButton)) {
            lastDropdownWrapper.appendChild(addButton);
        }
    }

    console.log(`Field at index ${fieldIndex} deleted successfully.`);
});


I have choosed 5 sets. now if i remove 2,3,4 sets now 5 willl be next to 1 (of count for ref). now i delete 5 too. now 1 will have delete and add icon. now if i click add icon. next set appears, but add button is not appended. why?