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

  // Get modal
  const modal = document.getElementById('composition');
  if (modal) {
    modal.setAttribute('is-open', 'true');
    modal.querySelector('fw-modal-title').innerHTML = `<span>Delete Mapping</span>`;
    modal.querySelector('fw-modal-content').innerHTML = `
      <span>Are you sure you want to delete this field mapping?</span>
    `;

    // Add event listener for the modal's "Yes" (submit) button
    modal.addEventListener(
      'fwSubmit',
      () => {
        // If it's the first field in the list, reset instead of deleting
        if (fieldIndex === 0) {
          console.log("Resetting the first field and clearing its choices.");

          fieldDropdown.value = ""; // Clear value
          fieldDropdown.setAttribute("placeholder", "Choose a field");
          fieldDropdown.disabled = false; // Allow user to reselect

          choicesContainer.innerHTML = ""; // Clear inner choices, but retain the container
          choicesContainer.style.display = "block"; // Ensure it's visible

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

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

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

          console.log("First field reset and choices cleared, but position retained.");

          modal.removeAttribute('is-open'); // Close the modal
          return; // Exit early for the first field
        }

        // For other fields, perform DELETE logic
        const findRule = ticketworkflowconditions[ruleIndex];
        if (findRule) {
          // Find the dynamic index of the dropdown in the backend combination
          const currentDropdowns = container.querySelectorAll(".field-name-dropdown");
          const currentDropdownIndex = Array.from(currentDropdowns).indexOf(fieldDropdown);

          if (currentDropdownIndex !== -1) {
            const combination = findRule.event.combination;
            combination.splice(currentDropdownIndex, 1); // Remove backend combination at the correct index

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

            console.log(`Backend updated after deletion: ${JSON.stringify(ticketworkflowconditions, null, 2)}`);
          } else {
            console.error("Dropdown not found in the container. Backend update skipped.");
          }
        }

        // UI Cleanup: Remove field dropdown, choices, and delete button
        fieldNameContainer.removeChild(fieldDropdown);
        choicesContainer.innerHTML = ""; // Clear the choices
        buttonContainer.removeChild(deleteButtonWrapper);

        // Handle remaining dropdowns in the UI
        const remainingDropdowns = container.querySelectorAll(".field-name-dropdown");

        if (remainingDropdowns.length === 0) {
          // Ensure Add button is in the buttonContainer when no dropdowns are left
          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 {
          // Add button to the last dropdown's 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.`);

        modal.removeAttribute('is-open'); // Close the modal
      },
      { once: true } // Ensure the listener is executed only once
    );

    // Add event listener to close the modal if "No" is clicked
    modal.querySelector("fw-modal-footer").addEventListener(
      "fwClose",
      () => {
        modal.removeAttribute("is-open"); // Close modal
        console.log("Delete operation was cancelled.");
      },
      { once: true }
    );
  } else {
    console.error("Modal element with ID 'composition' not found.");
  }
});




note this :

if i havent choosed last set, and clicked delete in last set, the add button is appended to the above but not clickable. it should because in above field will be choosed. based on this it should enable