How to remove the active class from an element when clicking on another element with the same class?

Question

JavaScript

Good afternoon. There are 6 buttons on the page, when you click on the button, a dropdown opens, with product filters, each button has its own drop. It is necessary to make sure that only one menu is active at a time, that is, when you click on another button, the menu from the previous button closes and opens at the active. You also need to close on click outside the menu. I found the code to close on click anywhere on the page and on click on the button itself, but when you click on another button, a new menu opens, and the old one does not close. The structure of all drops and buttons and their classes are the same, they all have common styles. How to make only 1 menu active. Here is the code i found

$(".dropdown__btn").click(function (event) {
  event.preventDefault();
  $(this).parent().toggleClass("active");
  return false;
});

$(document).click(function (e) {
  if (!$(this).closest(".dropdown__menu").length) {
    $(".dropdown__menu").parent().removeClass("active");
  }
});

Thank you