I can’t delete previously selected data in choice.js [closed]

Here I have a problem using choice.js, where the data selected in the first dropdown still appears in other dropdowns. Here I have added a dropdown update function in other functions, the results are still the same. data still appears in all dropdowns even though it has been selected

I use choice.js it is used to be responsive from desktop to mobile. maybe there are options other than choice.js?

function initChoicesOnNewSelect(selectElement) {
  if (!$(selectElement).hasClass('choices-initialized')) {
    new Choices(selectElement, {
      searchEnabled: false,
      itemSelectText: '',
    });
    $(selectElement).addClass('choices-initialized');
  }
}

function updateDropdownOptions() {
  var selectedValues = [];

  // Ambil semua nilai yang sudah dipilih di dropdown
  $('.gejala-select').each(function() {
    var selectedValue = $(this).val();
    if (selectedValue !== "") {
      selectedValues.push(selectedValue);
    }
  });

  $('.gejala-select').each(function() {
    var currentSelect = $(this);
    var currentValue = currentSelect.val();

    currentSelect.find('option').each(function() {
      var optionValue = $(this).val();
      if (optionValue !== "" && selectedValues.includes(optionValue) && optionValue !== currentValue) {
        $(this).prop('disabled', true);
      } else {
        $(this).prop('disabled', false);
      }
    });
  });


  $(".gejala-wrapper").each(function(index) {
    if (index === 0) {
      $(this).find(".btn-hapus-gejala").hide();
    } else {
      $(this).find(".btn-hapus-gejala").show();
    }
  });
}

$(document).ready(function() {
  $(".btn-tambah-gejala").click(function() {
    var newDropdown = `
      <div class="form-group gejala-wrapper">
        <div class="select-wrapper">
            <select name="gejala[]" class="form-control input-lg mt-2 gejala-select">
                <option value="">Pilih Gejala</option>
                @foreach($gejala_list as $gejala)
                <option value="{{ $gejala->kode_gejala }}">{{ $gejala->nama_gejala }}</option>
                @endforeach
            </select>
        </div>
        <button type="button" class="btn btn-danger btn-hapus-gejala">Hapus</button>
      </div>`;
    $("#gejala-container").append(newDropdown);

    let newSelect = $("#gejala-container .gejala-select").last()[0];
    initChoicesOnNewSelect(newSelect);

    updateDropdownOptions();
  });

  $(document).on("click", ".btn-hapus-gejala", function() {
    if ($('.gejala-wrapper').length > 1) {
      $(this).closest(".gejala-wrapper").remove();
      updateDropdownOptions();
    }
  });

  $(document).on('change', '.gejala-select', function() {
    updateDropdownOptions();
  });

  $(".gejala-select").each(function() {
    initChoicesOnNewSelect(this);
  });

  updateDropdownOptions();
});