function createDropdownField(container, field, alldata, matchedChoices = []) {
    console.log("Field Data :", field.required_for_agents);
    console.log("All Data Passed to Dropdown:", alldata); 

    const fieldContainer = document.createElement('div');
    fieldContainer.classList.add('form-group');
    fieldContainer.style.marginBottom = '10px';

    // Create and append the label
    const fieldLabelElement = document.createElement('label');
    fieldLabelElement.innerHTML = `${field.label} <span style="color: red;">*</span>`;
    fieldLabelElement.setAttribute('for', `field_${field.id}`);
    fieldLabelElement.style.fontWeight = '600';
    fieldLabelElement.style.marginBottom = '8px';
    fieldContainer.appendChild(fieldLabelElement);

    // Create a wrapper for dropdown and delete button in a single row
    const rowContainer = document.createElement('div');
    rowContainer.style.display = 'flex';
    rowContainer.style.alignItems = 'center';

    // Create and append the fw-select dropdown
    const newDropdown = document.createElement('fw-select');
    newDropdown.setAttribute('required', 'true');
    newDropdown.setAttribute('placeholder', `Select ${field.label}`);
    newDropdown.id = `field_${field.id}`;
    newDropdown.style.flex = '1';
    newDropdown.style.marginRight = '10px';

    // Add all options from field.choices
    field.choices.forEach(choice => {
        const option = document.createElement('fw-select-option');
        option.value = choice.value;
        option.textContent = choice.value;
        newDropdown.appendChild(option);
    });

    // Check if the field name exists in alldata.mandatory_fields
    if (alldata.mandatory_fields && alldata.mandatory_fields[field.name]) {
        // If it exists, set the dropdown's value to the corresponding value
        newDropdown.value = alldata.mandatory_fields[field.name];
    }

    // Handle the selection change event
    newDropdown.addEventListener('fwChange', function (event) {
        selectedMandatoryFields[field.name] = event.target.value;
    });

    rowContainer.appendChild(newDropdown);

    if (field.required_for_agents) {
        // Wrap delete button in a tooltip if required_for_agents is true
        const tooltip = document.createElement('fw-tooltip');
        tooltip.setAttribute('content', 'This field is chosen as mandatory');

        const deleteButton = document.createElement('fw-button');
        deleteButton.setAttribute('size', 'icon');
        deleteButton.setAttribute('color', 'secondary');
        deleteButton.innerHTML = '<fw-icon name="delete" size="20"></fw-icon>';
        deleteButton.setAttribute('disabled', 'true');

        tooltip.appendChild(deleteButton);
        rowContainer.appendChild(tooltip);
    } else {
        // Add standard delete button for non-mandatory fields
        const deleteButton = document.createElement('fw-button');
        deleteButton.setAttribute('size', 'icon');
        deleteButton.setAttribute('color', 'secondary');
        deleteButton.innerHTML = '<fw-icon name="delete" size="20"></fw-icon>';

        deleteButton.addEventListener('click', function () {
            container.removeChild(fieldContainer);
            delete selectedMandatoryFields[field.name];

            console.log('Remaining mandatory fields:', selectedMandatoryFields); // Log remaining mandatory fields
        });

        rowContainer.appendChild(deleteButton);
    }

    fieldContainer.appendChild(rowContainer);

    const hintText = document.createElement('div');
    hintText.classList.add('hint-text');
    hintText.style.fontSize = '12px';
    hintText.style.color = '#6c757d';
    hintText.style.marginTop = '4px';
    hintText.textContent = 'Select singular option';
    fieldContainer.appendChild(hintText);

    container.appendChild(fieldContainer);
}


in this after mapping existing value to the dropdown, add that value to the selectedMandatoryfields
as done in this functino 
function createDatePicker(container, field, fieldName, initialValue = '') {
  console.log("Field Data :", field.required_for_agents);
  console.log("Date Picker Data:", alldata.mandatory_fields);

  // Create field container
  const fieldContainer = document.createElement('div');
  fieldContainer.classList.add('form-group');
  fieldContainer.style.marginBottom = '10px';

  // Create label container
  const labelContainer = document.createElement('div');
  labelContainer.style.marginBottom = '5px';

  const fieldLabelElement = document.createElement('label');
  fieldLabelElement.innerHTML = `${field.label} <span style="color: red;">*</span>`;
  fieldLabelElement.setAttribute('for', `datepicker_${field.id}`);
  fieldLabelElement.style.fontWeight = '600';
  labelContainer.appendChild(fieldLabelElement);

  fieldContainer.appendChild(labelContainer);

  // Create date picker wrapper
  const datePickerWrapper = document.createElement('div');
  datePickerWrapper.style.display = 'flex';
  datePickerWrapper.style.alignItems = 'center';

  // Create the date picker element
  const newDatePicker = document.createElement('fw-datepicker');
  newDatePicker.id = `datepicker_${field.id}`;
  newDatePicker.classList.add('form-control');
  newDatePicker.setAttribute('show-time-picker', '');
  newDatePicker.value = initialValue ? initialValue : '2022-07-22T06:00:00.000Z';

  // Use existing value in alldata if available
  const existingValue = alldata.mandatory_fields?.[field.name] || initialValue;
  selectedMandatoryFields[field.name] = existingValue;
  newDatePicker.value = existingValue;

  newDatePicker.addEventListener('fwChange', function (e) {
    const selectedValue = e.detail.value;

    if (selectedValue !== '') {
      selectedMandatoryFields[field.name] = selectedValue;
      alldata.mandatory_fields[field.name] = selectedValue;
    } else {
      delete selectedMandatoryFields[field.name];
      delete alldata.mandatory_fields[field.name];
    }
  });

  datePickerWrapper.appendChild(newDatePicker);

  // Add delete button
  if (field.required_for_agents) {
    const tooltip = document.createElement('fw-tooltip');
    tooltip.setAttribute('content', 'This field is chosen as mandatory');

    const deleteButton = document.createElement('fw-button');
    deleteButton.setAttribute('size', 'icon');
    deleteButton.setAttribute('color', 'secondary');
    deleteButton.innerHTML = '<fw-icon name="delete" size="20"></fw-icon>';
    deleteButton.setAttribute('disabled', 'true');

    tooltip.appendChild(deleteButton);
    datePickerWrapper.appendChild(tooltip);
  } else {
    const deleteButton = document.createElement('fw-button');
    deleteButton.setAttribute('size', 'icon');
    deleteButton.setAttribute('color', 'secondary');
    deleteButton.innerHTML = '<fw-icon name="delete" size="20"></fw-icon>';

    deleteButton.addEventListener('click', function () {
      container.removeChild(fieldContainer);
      delete selectedMandatoryFields[field.name];
      delete alldata.mandatory_fields[field.name];
    });

    datePickerWrapper.appendChild(deleteButton);
  }
  
  fieldContainer.appendChild(datePickerWrapper);
  container.appendChild(fieldContainer);
}