async function addNewRule(eventName, fieldMappings) {
  const ticketworkflowContainer = document.getElementById('ticketworkflow-container');
  const eventContainer = document.createElement('div');
  eventContainer.classList.add('event-container');
  eventContainer.style.boxShadow = '0 5px 10px 0 rgba(0, 0, 0, 0.2)';
  eventContainer.style.padding = '30px';
  eventContainer.style.marginBottom = '15px';
  eventContainer.style.borderRadius = '5px';
  eventContainer.style.backgroundColor = '#fff';

  console.log("Creating Event Dropdown");
  const newDropdownSet = document.createElement('div');
  newDropdownSet.classList.add('row', 'ticketworkflow-dropdown');

  let selectedEvent = typeof eventName === 'string' ? eventName : '';

  newDropdownSet.innerHTML = `
      <div class="col-md-2 event-name-container">
          <fw-select
              class="event-name-dropdown"
              label="Select Event Name"
              required="true"
              placeholder="Your choice"
              hint-text="Select singular option">
              <fw-select-option value="TicketCreate" ${selectedEvent === "TicketCreate" ? "selected" : ""}>Ticket Create</fw-select-option>
              <fw-select-option value="TicketUpdate" ${selectedEvent === "TicketUpdate" ? "selected" : ""}>Ticket Update</fw-select-option>
              <fw-select-option value="TicketCreateandUpdate" ${selectedEvent === "TicketCreateandUpdate" ? "selected" : ""}>Ticket Create and Update</fw-select-option>
          </fw-select>
      </div>
  `;

  let eventSelect = newDropdownSet.querySelector('.event-name-dropdown');
  eventSelect.value = selectedEvent;

  eventSelect.addEventListener('fwChange', async () => {
    const newEvent = eventSelect.value;

    if (newEvent !== selectedEvent) {

      if (ticketworkflowconditions[selectedEvent]) {
        delete ticketworkflowconditions[selectedEvent];
        console.log(`Removed ${selectedEvent} from ticketworkflowconditions.`);
      }

      if (!ticketworkflowconditions[newEvent]) {
        ticketworkflowconditions[newEvent] = { combinations: [{ isEnabled: true, fields: {} }] };
      } else {
        const newCombination = { isEnabled: true, fields: {} };
        ticketworkflowconditions[newEvent].combinations.push(newCombination);
      }

      const existingFieldNameContainer = newDropdownSet.querySelector('.field-name-container');
      const existingChoicesContainer = newDropdownSet.querySelector('.choices-container');
      const existingButtonContainer = newDropdownSet.querySelector('.button-container');


      if (existingFieldNameContainer) {
        existingFieldNameContainer.innerHTML = '';
      } else {
        const fieldNameContainer = document.createElement('div');
        fieldNameContainer.classList.add('col-md-2', 'field-name-container');
        newDropdownSet.appendChild(fieldNameContainer);
      }

      if (existingChoicesContainer) {
        existingChoicesContainer.innerHTML = '';
      } else {
        const choicesContainer = document.createElement('div');
        choicesContainer.classList.add('col-md-2', 'choices-container');
        newDropdownSet.appendChild(choicesContainer);
      }

      if (!existingButtonContainer) {
        const buttonContainer = document.createElement('div');
        buttonContainer.classList.add('col-md-3', 'button-container');
        buttonContainer.style.marginTop = '25px';
        newDropdownSet.appendChild(buttonContainer);
      }

      // Call the function to populate the dropdowns with the selected event
      await fieldschoosingvalues(newEvent, existingFieldNameContainer || fieldNameContainer, existingChoicesContainer || choicesContainer, existingButtonContainer || buttonContainer, newDropdownSet);

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

      selectedEvent = newEvent;
    }
  });

  eventContainer.appendChild(newDropdownSet);
  ticketworkflowContainer.appendChild(eventContainer);

  // If any further initialization is needed with fieldMappings, execute that here
  await initializeEventDropdown(newDropdownSet, fieldMappings);

}

inthis, instead of mapping with values, it should map with count of combination having

async function addNewRule(eventName, fieldMappings) {
  const ticketworkflowContainer = document.getElementById('ticketworkflow-container');
  const eventContainer = document.createElement('div');
  eventContainer.classList.add('event-container');
  eventContainer.style.boxShadow = '0 5px 10px 0 rgba(0, 0, 0, 0.2)';
  eventContainer.style.padding = '30px';
  eventContainer.style.marginBottom = '15px';
  eventContainer.style.borderRadius = '5px';
  eventContainer.style.backgroundColor = '#fff';

  console.log("Creating Event Dropdown");
  const newDropdownSet = document.createElement('div');
  newDropdownSet.classList.add('row', 'ticketworkflow-dropdown');

  let selectedEvent = typeof eventName === 'string' ? eventName : '';

  newDropdownSet.innerHTML = `
      <div class="col-md-2 event-name-container">
          <fw-select
              class="event-name-dropdown"
              label="Select Event Name"
              required="true"
              placeholder="Your choice"
              hint-text="Select singular option">
              <fw-select-option value="TicketCreate" ${selectedEvent === "TicketCreate" ? "selected" : ""}>Ticket Create</fw-select-option>
              <fw-select-option value="TicketUpdate" ${selectedEvent === "TicketUpdate" ? "selected" : ""}>Ticket Update</fw-select-option>
              <fw-select-option value="TicketCreateandUpdate" ${selectedEvent === "TicketCreateandUpdate" ? "selected" : ""}>Ticket Create and Update</fw-select-option>
          </fw-select>
      </div>
  `;

  let eventSelect = newDropdownSet.querySelector('.event-name-dropdown');
  eventSelect.value = selectedEvent;

  eventSelect.addEventListener('fwChange', async () => {
    const newEvent = eventSelect.value;

    if (newEvent !== selectedEvent) {

      if (ticketworkflowconditions[selectedEvent]) {
        delete ticketworkflowconditions[selectedEvent];
        console.log(`Removed ${selectedEvent} from ticketworkflowconditions.`);
      }

      if (!ticketworkflowconditions[newEvent]) {
        ticketworkflowconditions[newEvent] = { combinations: [{ isEnabled: true, fields: {} }] };
      } else {
        const newCombination = { isEnabled: true, fields: {} };
        ticketworkflowconditions[newEvent].combinations.push(newCombination);
      }

      const existingFieldNameContainer = newDropdownSet.querySelector('.field-name-container');
      const existingChoicesContainer = newDropdownSet.querySelector('.choices-container');
      const existingButtonContainer = newDropdownSet.querySelector('.button-container');


      if (existingFieldNameContainer) {
        existingFieldNameContainer.innerHTML = '';
      } else {
        const fieldNameContainer = document.createElement('div');
        fieldNameContainer.classList.add('col-md-2', 'field-name-container');
        newDropdownSet.appendChild(fieldNameContainer);
      }

      if (existingChoicesContainer) {
        existingChoicesContainer.innerHTML = '';
      } else {
        const choicesContainer = document.createElement('div');
        choicesContainer.classList.add('col-md-2', 'choices-container');
        newDropdownSet.appendChild(choicesContainer);
      }

      if (!existingButtonContainer) {
        const buttonContainer = document.createElement('div');
        buttonContainer.classList.add('col-md-3', 'button-container');
        buttonContainer.style.marginTop = '25px';
        newDropdownSet.appendChild(buttonContainer);
      }

      // Call the function to populate the dropdowns with the selected event
      await fieldschoosingvalues(newEvent, existingFieldNameContainer || fieldNameContainer, existingChoicesContainer || choicesContainer, existingButtonContainer || buttonContainer, newDropdownSet);

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

      selectedEvent = newEvent;
    }
  });

  eventContainer.appendChild(newDropdownSet);
  ticketworkflowContainer.appendChild(eventContainer);

  // If any further initialization is needed with fieldMappings, execute that here
  await initializeEventDropdown(newDropdownSet, fieldMappings);

}



after choosing dropdown values , the UI and json will look like this 




 {
        "TicketCreate": {
          "combinations": [
            {
              "isEnabled": true,
              "fields": {
                "ticket_type": "29000509458",
                "status": "3"
              }
            },
            {
              "isEnabled": true,
              "fields": {
                "urgency": "3"
              }
            }
          ]
        }
      }

in this json, There is a field name TicketCreate. ok. but in that, you can see combinations, in that it has 2 array of objects. 

that means you have to create two times ticketworkflow-container and event container and map the value "TicketCreate" in dropdown 2 times and for each time you will map each combination