async function getFieldnamesfrom1stapi(
  fieldNameContainer,
  fields,
  choicesContainer,
  selectedEventValue,
  buttonContainer,
  container,
  selectedFieldName = null,
  selectedChoices = null,
  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');

  fields.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 Add and Delete buttons
  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.style.marginRight = '8px';

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

// Clear existing Add button to avoid duplicates
const existingAddButton = buttonContainer.querySelector('.add-button');
if (existingAddButton) {
  existingAddButton.remove();
}

// Handle Delete button logic
if (fieldIndex === 0) {
  buttonContainer.appendChild(deleteButton); // Append Delete button directly for the first field
} else {
  const deleteButtonWrapper = document.createElement('div');
  deleteButtonWrapper.classList.add('delete-button-container', 'mt-5');
  deleteButtonWrapper.appendChild(deleteButton);
  buttonContainer.appendChild(deleteButtonWrapper); // Append Delete button wrapper
}

// Check if this is the last field (after field is added), append Add button
const isLastField = fieldIndex === container.querySelectorAll('.field-name-dropdown').length - 1;

if (isLastField) {
  // Only append Add button if it's the last field
  buttonContainer.appendChild(addButton); // Append Add button directly to the buttonContainer for the last field
}


  // Add button functionality
  addButton.addEventListener('click', () => {
    console.log(ticketworkflowconditions[ruleIndex].event);   
    const newIndex = ticketworkflowconditions[ruleIndex].event.combination.length;
    createAdditionalDropdowns(container, obj, ruleIndex, newIndex);
  });

  // Delete button functionality
  deleteButton.addEventListener('click', () => {
    console.log(`Delete button clicked for mapping at index ${fieldIndex}`);
    fieldNameContainer.removeChild(fieldDropdown);
    choicesContainer.innerHTML = '';
    const buttonParent = deleteButton.parentElement.classList.contains('delete-button-container')
      ? deleteButton.parentElement
      : deleteButton;
    buttonContainer.removeChild(buttonParent);
    if (fieldIndex === 0) {
      buttonContainer.removeChild(addButton);
    }
  });

  // Listen for field changes
  // fieldDropdown.addEventListener('fwChange', async (event) => {
  //   const newSelectedFieldName = event.target.value;

  //   // Clear existing choices
  //   choicesContainer.innerHTML = '';

  //   const newSelectedField = fields.find((field) => field.name === newSelectedFieldName);
  //   if (newSelectedField) {
  //     const findRule = ticketworkflowconditions[ruleIndex];
  //     if (findRule) {
  //       const combination = findRule.event.combination;

  //       combination.splice(fieldIndex, 1);

  //       const newKeyValue = { [newSelectedFieldName]: null };
  //       combination.splice(fieldIndex, 0, newKeyValue);

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

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

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



  fieldDropdown.addEventListener('fwChange', async (event) => {
    const newSelectedFieldName = event.target.value;
 
    // Clear existing choices
    choicesContainer.innerHTML = '';
 
    const newSelectedField = fields.find((field) => field.name === newSelectedFieldName);
    if (newSelectedField) {
      const findRule = ticketworkflowconditions[ruleIndex];
      if (findRule) {
        const combination = findRule.event.combination;
 
        // combination.splice(fieldIndex, 1);
 
        const newKeyValue = { [newSelectedFieldName]: null };
        //[""]
        // let isFieldExists = combination.findIndex(e => { Object.keys(e).includes(newSelectedFieldName) });
        // console.log("isFieldExists", isFieldExists);
       
        // if (isFieldExists.length) {
          combination.splice(fieldIndex, 1, newKeyValue);
        // } else {
        //   combination.push(newKeyValue);
        // }
 
        if (combination)
          console.log(`Field changed. Updated backend: ${JSON.stringify(ticketworkflowconditions, null, 2)}`);
      }
 
      await showingitschoices(
        choicesContainer,
        newSelectedField,
        selectedEventValue,
        newSelectedFieldName,
        buttonContainer,
        container,
        fieldNameContainer,
        null,
        obj,
        ruleIndex,
        fieldIndex
      );
 
      console.log(`Field changed to: ${newSelectedFieldName}`);
    } else {
      console.error("Field not found in Dropdown");
    }
  }); 


  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.combination;
      const newKeyValue = { [selectedFieldName]: selectedChoices ? selectedChoices[0] : null };
      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");
    }

  }



  


}


in this, add (plus) icon will be added at the end of the set of field dropdown, if i click add and created another set the existing add buttom should be removed