{
    "rule": 0,
    "event": {
      "eventName": "TicketCreate",
      "eventValue": "TicketCreate",
      "combination": [
        {
          "status": [
            "5",
            "4",
            "3"
          ]
        },
        {
          "status": [
            "4",
            "5"
          ]
        },
        {
          "status": []
        }
      ]
    },
    "checked": true,
    "combination": [
      {
        "status": [
          "5",
          "4",
          "3"
        ]
      },
      {
        "status": [
          "4",
          "5"
        ]
      },
      {
        "status": []
      }
    ]
  }


when i edit existing values why it adds 3 times status fix that

async function getFieldnamesfrom1stapi(
  fieldNameContainer,
  fields,
  choicesContainer,
  selectedEventValue,
  buttonContainer,
  container,
  selectedFieldName = null,
  selectedChoices = [], 
  obj,
  ruleIndex,
  fieldIndex
) {
  if (!selectedEventValue) {
    console.error("Select an event before proceeding.");
    return;
  }

  // Create the field dropdown
  const fieldDropdown = document.createElement('fw-select');
  fieldDropdown.classList.add('field-name-dropdown');
  fieldDropdown.setAttribute('label', 'Ticket Fields');
  fieldDropdown.setAttribute('required', 'true');
  fieldDropdown.setAttribute('placeholder', 'Choose a field');
  fieldDropdown.setAttribute('hint-text', 'Select singular option');

  const selectedFields = Array.from(container.querySelectorAll('.field-name-dropdown'))
    .map((dropdown) => dropdown.value)
    .filter((value) => value);

  fields
    .filter((field) => !selectedFields.includes(field.name))
    .forEach((field) => {
      const option = document.createElement('fw-select-option');
      option.setAttribute('value', field.name);
      option.textContent = field.label;
      fieldDropdown.appendChild(option);

      if (selectedFieldName && field.name === selectedFieldName) {
        option.setAttribute('selected', 'selected');
      }
    });

  fieldNameContainer.appendChild(fieldDropdown);

  // Create the buttons
  const deleteButton = document.createElement('fw-button');
  deleteButton.setAttribute('size', 'icon');
  deleteButton.classList.add('delete-button');
  deleteButton.innerHTML = '<fw-icon name="delete" size="20" color="white"></fw-icon>';

  const deleteButtonWrapper = document.createElement('div');
  deleteButtonWrapper.classList.add('delete-button-container', 'mt-5');
  deleteButtonWrapper.appendChild(deleteButton);
  buttonContainer.appendChild(deleteButtonWrapper);

  const existingAddButton = container.querySelector('.add-button');
  if (existingAddButton) {
    existingAddButton.remove();
  }

  const addButton = document.createElement('fw-button');
addButton.setAttribute('size', 'icon');
addButton.classList.add('add-button');
addButton.innerHTML = '<fw-icon name="plus" size="20" color="white"></fw-icon>';
addButton.disabled = true;

// Check if this is the first set
const isFirstSet = container.querySelectorAll('.field-name-dropdown').length === 1;

// Clear any existing margin styles
addButton.style.marginTop = ''; // Remove marginTop

// Set the new margin style based on whether it's the first set or not
if (isFirstSet) {
  addButton.style.marginTop = '48px'; 
} else {
  addButton.style.marginTop = '48px'; // This can be the same; update if different margin needed later
}

// Append the Add button to the container
buttonContainer.appendChild(addButton);

 
  if (fieldIndex === container.querySelectorAll('.field-name-dropdown').length - 1) {
    buttonContainer.appendChild(addButton);
  }



  addButton.addEventListener("click", () => {
    console.log("Add Button clicked. Freezing dropdowns and choices.");
    
    const dropdowns = container.querySelectorAll(".field-name-dropdown");
    dropdowns.forEach((dropdown) => {
        dropdown.disabled = true; 
    });
    
    const choiceContainers = container.querySelectorAll(".choice-container");
    choiceContainers.forEach((choiceContainer) => {
        Array.from(choiceContainer.querySelectorAll("input, select")).forEach(
            (input) => {
                input.disabled = true; 
            }
        );
    });

    const newIndex = ticketworkflowconditions[ruleIndex].event.combination.length;
    createAdditionalDropdowns(container, obj, ruleIndex, newIndex);

    checkAddButtonVisibility();
});

  // Updated delete button logic
if (container.querySelectorAll('.field-name-dropdown').length > 1) {
  const deleteButton = document.createElement('fw-button');
  deleteButton.setAttribute('size', 'icon');
  deleteButton.classList.add('delete-button');
  deleteButton.innerHTML = '<fw-icon name="delete" size="20" color="white"></fw-icon>';
}

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

  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>`;

    modal.addEventListener(
      "fwSubmit",
      () => {
        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);

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

        fieldNameContainer.removeChild(fieldDropdown);
        choicesContainer.innerHTML = "";
        buttonContainer.removeChild(deleteButtonWrapper);

        modal.removeAttribute("is-open");
        checkAddButtonVisibility();
      },
      { once: true }
    );

    modal.querySelector("fw-modal-footer").addEventListener(
      "fwClose",
      () => {
        modal.removeAttribute("is-open");
        console.log("Delete operation was cancelled.");
      },
      { once: true }
    );
  } else {
    console.error("Modal element with ID 'composition' not found.");
  }
});

function checkDeleteButtonVisibility() {
  const dropdowns = container.querySelectorAll(".field-name-dropdown");
  const firstSetDeleteButtons = container.querySelectorAll(".delete-button-container");
  
  firstSetDeleteButtons.forEach((buttonWrapper, index) => {
    if (index === 0) { 
      if (dropdowns.length === 1) {
        buttonWrapper.style.display = "none";
      } else {
        buttonWrapper.style.display = "block"; 
      }
    }
  });
}

checkDeleteButtonVisibility();

  fieldDropdown.addEventListener("fwChange", async (event) => {
  const newSelectedFieldName = event.target.value;

  if (!newSelectedFieldName) {    
    choicesContainer.innerHTML = "";
    choicesContainer.innerHTML = '<br><br><br><div class="temporary style" style="margin-bottom: 9px;"></div>';
    choicesContainer.style.display = "block";

    const findRule = ticketworkflowconditions[ruleIndex];
    if (findRule) {
      const combination = findRule.event.combination;
      combination[fieldIndex] = { field: null };
      ticketworkflowconditions[ruleIndex] = {
        ...findRule,
        event: { ...findRule.event, combination },
      };
    }
    console.log("Field deselected. Choices dropdown cleared.");
    return;
  }

  const newSelectedField = fields.find((field) => field.name === newSelectedFieldName);
  if (newSelectedField) {
    const findRule = ticketworkflowconditions[ruleIndex];
    if (findRule) {
      const combination = findRule.event.combination;
      const newKeyValue = { [newSelectedFieldName]: [] };
      combination.splice(fieldIndex, 1, newKeyValue);
      console.log(`Field changed. Updated backend:`, JSON.stringify(ticketworkflowconditions, null, 2));
    }

    await showingitschoices(
      choicesContainer,
      newSelectedField,
      selectedEventValue,
      newSelectedFieldName,
      buttonContainer,
      container,
      fieldNameContainer,
      [],
      obj,
      ruleIndex,
      fieldIndex
    );

    console.log(`Field changed to: ${newSelectedFieldName}`);
  } else {
    console.error("Field not found in the Dropdown");
  }

  checkAddButtonVisibility();
});


  if (selectedFieldName) {
    const selectedField = fields.find((field) => field.name === selectedFieldName);
    if (selectedField) {
      await showingitschoices(
        choicesContainer,
        selectedField,
        selectedEventValue,
        selectedFieldName,
        buttonContainer,
        container,
        fieldNameContainer,
        selectedChoices,
        obj,
        ruleIndex,
        fieldIndex
      );

      const findRule = ticketworkflowconditions[ruleIndex];
      const combination = findRule.event.combination;
      const newKeyValue = { [selectedFieldName]: selectedChoices || [] };
      combination.splice(fieldIndex, 1, newKeyValue);
      ticketworkflowconditions[ruleIndex] = { ...findRule, combination };

      console.log(`Updated ticketworkflowconditions: ${JSON.stringify(ticketworkflowconditions, null, 2)}`);
    } else {
      console.error(`Field not found in Dropdown for existing mapping: ${selectedFieldName}`);
    }
  }


function checkAddButtonVisibility() {
    const dropdowns = container.querySelectorAll(".field-name-dropdown");
    const selectedFieldValues = Array.from(dropdowns)
        .map((dropdown) => dropdown.value)
        .filter((value) => value !== "");

    const areAllFieldsSelected = selectedFieldValues.length >= fields.length;

    const lastDropdownWrapper =
        dropdowns.length > 0
            ? dropdowns[dropdowns.length - 1].closest(".button-container")
            : null;

    if (areAllFieldsSelected) {
        console.log("All fields are selected. Hiding Add Button.");
        if (addButton.parentNode) {
            addButton.parentNode.removeChild(addButton);
        }
    } else {
        console.log("Fields are still available. Add Button will be shown.");

        if (dropdowns.length > 0 && lastDropdownWrapper) {
            if (!lastDropdownWrapper.contains(addButton)) {
                lastDropdownWrapper.appendChild(addButton);
                addButton.style.visibility = "visible";
            }
        }

        addButton.disabled = false; // Always enable Add Button if it's displayed.
    }
}
  
}