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

//   if (!newSelectedFieldName) {
//     // Clear choices if field is deselected
//     choicesContainer.innerHTML = "";
//     const findRule = ticketworkflowconditions[ruleIndex];
//     if (findRule) {
//       findRule.event.combination[fieldIndex] = {}; // Clear the field mapping
//     }
//     console.log("Field deselected. Choices cleared.");
//     return;
//   }

//   const newSelectedField = fields.find((field) => field.name === newSelectedFieldName);
//   if (newSelectedField) {
//     const findRule = ticketworkflowconditions[ruleIndex];
//     if (findRule) {
//       // Instead of adding a new combination, update the existing combination at the given fieldIndex
//       findRule.event.combination[fieldIndex] = {
//         [newSelectedFieldName]: selectedChoices || [], // Preserve current choices
//       };
//     }

//     console.log(`Field changed. Updated backend:`, JSON.stringify(ticketworkflowconditions, null, 2));

//     await showingitschoices(
//       choicesContainer,
//       newSelectedField,
//       selectedEventValue,
//       newSelectedFieldName,
//       buttonContainer,
//       container,
//       fieldNameContainer,
//       [], // Clear choices if necessary
//       obj,
//       ruleIndex,
//       fieldIndex
//     );

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

//   checkAddButtonVisibility();
// });


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

//   if (!newSelectedFieldName) {
//     // Clear choices if field is deselected
//     choicesContainer.innerHTML = "";
//     const findRule = ticketworkflowconditions[ruleIndex];
//     if (findRule) {
//       findRule.event.combination[fieldIndex] = {}; 
//     }
//     console.log("Field deselected. Choices cleared.");
//     return;
//   }

  
//   const newSelectedField = fields.find((field) => field.name === newSelectedFieldName);
//   if (newSelectedField) {
//     const findRule = ticketworkflowconditions[ruleIndex];
//     if (findRule) {  
//       findRule.event.combination[fieldIndex] = {
//         [newSelectedFieldName]: [], // Preserve current choices
//       };
//     }

//     console.log(
//       `Field changed. Updated ticketworkflowconditions: ${JSON.stringify(
//         ticketworkflowconditions,
//         null,
//         2
//       )}`
//     );

//     // Call the function to display choices
//     await showingitschoices(
//       choicesContainer,
//       newSelectedField,
//       selectedEventValue,
//       newSelectedFieldName,
//       buttonContainer,
//       container,
//       fieldNameContainer,
//       [], // Clear choices if necessary
//       obj,
//       ruleIndex,
//       fieldIndex
//     );

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

//   checkAddButtonVisibility();
// });


when i edit already existing values why it adds as new one like this?

 {
    "rule": 0,
    "event": {
      "eventName": "TicketCreate",
      "eventValue": "TicketCreate",
      "combination": [
        {
          "department": [
            "29000301634",
            "29000301632"
          ]
        },
        {
          "department": [
            "29000301632"
          ]
        }
      ]
    },
    "checked": true
  }