in this, you have mapped successfully event dropdown, 

[
        {
          "eventName": "TicketCreateandUpdate",
          "isEnabled": true,
          "fields": {
            "source": "3",
            "ticket_type": "29000509463",
            "status": "3"
          }
        },
        {
          "eventName": "TicketCreateandUpdate",
          "isEnabled": true,
          "fields": {}
        },
        {
          "eventName": "TicketUpdate",
          "isEnabled": true,
          "fields": {
            "ticket_type": "29000509457",
            "impact": "2"
          }
        }
      ]

this is the json. in this. for every event there is a fields which contain data of fields and choices (key and value )

now for ex. if you map TicketCreateandUpdate , you have to map that event's fields   "fields": {
            "source": "3",
            "ticket_type": "29000509463",
            "status": "3"
          }

source, ticket_type these are all field name by using getfieldsfrom1stapi match with name and map the fields dropdown. 

same way for choices. 

this should happen for every array in this 

async function addNewRule(eventName, workflowConditions) {

  console.log("Existing Workflow Conditions:", workflowConditions);

  // Log existing data for each event mapping
  workflowConditions.forEach(condition => {
    console.log(`Event: ${condition.eventName}`);
    console.log(`Fields: ${JSON.stringify(condition.fields, null, 2)}`);
  });

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

  const newDropdownSet = document.createElement('div');
  newDropdownSet.classList.add('row', 'ticketworkflow-dropdown');

  // Use 'let' to allow reassignment of selectedEvent
  let selectedEvent = typeof eventName === 'string' ? eventName : ''; // Declaring selectedEvent here with 'let'

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

  const eventSelect = newDropdownSet.querySelector('.event-name-dropdown');

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

      console.log("Previous Selected Event:", selectedEvent); // Log the previous selected event

      console.log("New Event Name:", newEvent);
     
      const previousEventIndex = workflowConditions.findIndex(cond => cond.eventName === selectedEvent);
      
      if (previousEventIndex !== -1) {
          workflowConditions.splice(previousEventIndex, 1);
          console.log(`Removed existing condition for event: "${selectedEvent}"`);
      }

      // Clear existing field-related containers
      newDropdownSet.querySelectorAll('.field-name-container, .choices-container, .button-container').forEach(container => container.remove());

      // Create a new condition for the newly selected event
      const newCondition = { eventName: newEvent, isEnabled: true, fields: {} };
      workflowConditions.push(newCondition);
      console.log(`Added new condition for: "${newEvent}"`);

      // Create new containers for fields and choices
      const fieldNameContainer = document.createElement('div');
      fieldNameContainer.classList.add('col-md-2', 'field-name-container');
      newDropdownSet.appendChild(fieldNameContainer);

      const choicesContainer = document.createElement('div');
      choicesContainer.classList.add('col-md-2', 'choices-container');
      newDropdownSet.appendChild(choicesContainer);

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

      // Populate fields based on the new event's context
      await fieldschoosingvalues(newEvent, fieldNameContainer, choicesContainer, buttonContainer, newDropdownSet, null, null);

      // Log the updated state of workflowConditions
      console.log(`Updated workflowConditions: ${JSON.stringify(workflowConditions, null, 2)}`);

      // Update the selected event after the change
      selectedEvent = newEvent; // Reassign selectedEvent here
  });

  // Append the newDropdownSet to the eventContainer
  eventContainer.appendChild(newDropdownSet);
  ticketworkflowContainer.appendChild(eventContainer);
}

async function fieldschoosingvalues(selectedEventValue, fieldNameContainer, choicesContainer, buttonContainer, container, selectedFieldName = null, selectedChoices = null) {
  if (!selectedEventValue) {
      console.error("fieldschoosingvalues called with an undefined selectedEventValue.");
      return;
  }

  try {
      let statusResp = await makeApiCall(apiKeyInput1.value, domainInput1.value);

      if (statusResp && statusResp.ticket_fields) {
          const fields = statusResp.ticket_fields.filter(field =>
              field.field_type.startsWith('default_') &&
              field.choices &&
              field.choices.length > 0
          );

          if (selectedFieldName) {
              const fieldContainer = document.createElement('div');
              fieldContainer.classList.add('field-container');
              fieldNameContainer.appendChild(fieldContainer);

              const choicesDiv = document.createElement('div');
              choicesDiv.classList.add('choices-container');
              choicesContainer.appendChild(choicesDiv);

              await getFieldnamesfrom1stapi(fieldContainer, fields, choicesDiv, selectedEventValue, buttonContainer, container, selectedFieldName, selectedChoices);
          } else {
              await getFieldnamesfrom1stapi(fieldNameContainer, fields, choicesContainer, selectedEventValue, buttonContainer, container);
          }
      } else {
          console.error('No fields found or data not available');
      }
  } catch (error) {
      console.error("Error fetching data for Dropdown:", error);
  }
}

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

    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');

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

        // Select the current selected field if available
        if (selectedFieldName && field.name === selectedFieldName) {
            option.setAttribute('selected', 'selected');
        }
    });

    fieldNameContainer.appendChild(fieldDropdown);

    if (selectedFieldName) {
        const selectedField = fields.find(field => field.name === selectedFieldName);
        if (selectedField) {
            // Send the selected field and its choices to showingitschoices for mapping
            await showingitschoices(choicesContainer, selectedField, selectedEventValue, selectedFieldName, buttonContainer, container, fieldNameContainer, selectedChoices);
        } else {
            console.error('Field not found in Dropdown');
        }
    }

    // Handle field change event and pass selected field to showingitschoices
    fieldDropdown.addEventListener('fwChange', async (event) => {
        const newSelectedFieldName = event.target.value;

        // Find the event condition for the selected event name
        const eventCondition = ticketworkflowconditions.find(cond => cond.eventName === selectedEventValue);

        if (eventCondition) {
            const previousFieldName = selectedFieldName;  // Store the previous selected field name

            // Log the previous field name for debugging
            console.log(`Previous field name: ${previousFieldName}`);

            if (previousFieldName && previousFieldName !== newSelectedFieldName) {
                // Don't replace, just add new values
                if (!eventCondition.fields) {
                    eventCondition.fields = {};
                }
                eventCondition.fields[newSelectedFieldName] = null;  // Add the new field with a placeholder value (null)
                console.log(`Added new field "${newSelectedFieldName}" to event condition.`);
            }

            // Clear the choices container before adding new choices
            choicesContainer.innerHTML = '';

            const newSelectedField = fields.find(field => field.name === newSelectedFieldName);
            if (newSelectedField) {
                // Send the newly selected field and its choices to showingitschoices for mapping
                await showingitschoices(choicesContainer, newSelectedField, selectedEventValue, newSelectedFieldName, buttonContainer, container, fieldNameContainer);
            } else {
                console.error('Field not found in Dropdown');
            }
        }
    });
}

async function showingitschoices(choicesContainer, selectedField, selectedEventValue, selectedFieldName, buttonContainer, container, fieldNameContainer, selectedChoices = null) {
  choicesContainer.innerHTML = ''; // Clear existing content

  // Create the choices dropdown
  const choicesDropdown = document.createElement('fw-select');
  choicesDropdown.classList.add('choices-dropdown');
  choicesDropdown.setAttribute('label', `${selectedFieldName}`);
  choicesDropdown.setAttribute('required', 'true');
  choicesDropdown.setAttribute('placeholder', `Choose ${selectedFieldName}`);
  choicesDropdown.setAttribute('hint-text', 'Select singular option');

  selectedField.choices.forEach(choice => {
    const option = document.createElement('fw-select-option');
    option.setAttribute('value', choice.id);
    option.textContent = choice.value;
    choicesDropdown.appendChild(option);

    if (selectedChoices && selectedChoices.includes(String(choice.id))) {
      option.setAttribute('selected', 'selected');
    }
  });

  // Append the choices dropdown to the container
  choicesContainer.appendChild(choicesDropdown);

  // Listen for changes in the choices selection
  choicesDropdown.addEventListener('fwChange', (event) => {
    const selectedChoiceId = event.target.value;

    // Find the event condition for the selected event name
    let eventCondition = ticketworkflowconditions.find(cond => cond.eventName === selectedEventValue);
    if (!eventCondition) {
      eventCondition = { eventName: selectedEventValue, isEnabled: true, fields: {} };
      ticketworkflowconditions.push(eventCondition);
    }

    // Update the fields object with the selected choice
    if (!eventCondition.fields) {
      eventCondition.fields = {};
    }
    eventCondition.fields[selectedFieldName] = selectedChoiceId;

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

  // Add a button to create additional fields and choices
  const addButton = document.createElement('button');
  addButton.textContent = 'Add New Field & Choices';
  addButton.classList.add('btn', 'btn-primary', 'mt-3'); // Styling the button

  // Button event listener to add new fields and choices dropdowns
  addButton.addEventListener('click', () => {
    createAdditionalDropdowns(container);
  });

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