// Delete Button Logics
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 the specific field

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

          modal.removeAttribute("is-open"); // Close the modal
          // Dynamically recheck after resetting
          checkAddButtonVisibility();
          return; // Exit early for the first field
        }

        // For other fields, perform DELETE logic
        const findRule = ticketworkflowconditions[ruleIndex];
        if (findRule) {
          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 the combination at the correct index

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

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

        modal.removeAttribute("is-open"); // Close the modal

        // Dynamically recheck Add Button visibility after a field is deleted
        checkAddButtonVisibility();
      },
      { once: true } // Listener should execute only once
    );

    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.");
  }
});


without remove add this feature :

in this, fields has 5 dropdowns, in this i have choosed 5 dropdown that means i dont have any to add.  now if i remove any set (either any), now the remaining 4 stays choosed, now the 1 set i removed is not added that means it havent choosed so the add button should be append to the last set ( everything should be dynamic)