Почему событие onCloseEnd в открывшемся выпадающем меню не работает, когда я закрываю это меню, открывая другое такое выпадающее меню, но с другим идентификатором?

Question

У меня есть много форм с выпадающими меню , которые находятся в контейнере task-column . Когда я нажимаю на раскрывающееся меню, событие onOpenStart запускается и добавляет класс overflow-visible в контейнер task-column , делая значение переполнения видимым в этом контейнере. , Когда я закрываю выпадающее меню , запускается событие onCloseEnd , и оно удаляет класс , видимый при переполнении . Все просто Но если я не нажму нигде на экране, чтобы закрыть меню, а просто открою следующее меню , просто с другого идентификатора, то по какой-то причине он не определяет это как закрытие предыдущего меню и следовательно, видимый переполнением класс не добавляется. Я не понимаю почему, потому что предыдущее меню закрывается.

jQuery(function ($) {
  $('.dropdown-trigger.card-btn-dropdown.float-right').dropdown({
    onOpenStart: function () {
      $('.task-collumn').addClass("overflow-visible");
      console.log('added overflow');
    },
    onCloseEnd: function () {

      $('.task-collumn').removeClass("overflow-visible");
    }
  });
});

Поэтому, когда я щелкаю в любом месте, где находится красная точка, буквально в любом месте на веб-сайте, запускается событие onCloseEnd, и оно работает:

Но когда я нажимаю на следующую выпадающую кнопку - тогда он как-то не распознает мое событие onCloseEnd, и запускается другое событие onOpenStart. Я не понимаю, почему предыдущее меню закрывается, хотя.