Добавляйте и удаляйте классы, когда нажимаете на несколько элементов div, используя jquery

Question

Я пытаюсь оформить меню, которое я создал, и добавляю разные классы для каждого элемента div каждый раз, когда кто-то нажимает на них.Как я могу удалить уже добавленный класс из этого элемента, когда я щелкаю по любому из трех других элементов?

$('.fashion-btn').click(function() {
  $(this).addClass("active-btn-red");
});

$('.garden-btn').click(function() {
  $(this).addClass("active-btn-pink");
});

$('.technology-btn').click(function() {
  $(this).addClass("active-btn-purple");
});

$('.auto-btn').click(function() {
  $(this).addClass("active-btn-deep-purple");
});

.categories-sidebar-popup-menu-row {
  padding: 10px 15px;
  cursor: pointer;
  display: block;
  position: relative;
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 28px;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.5px;
  color: #555B66;
}

.active-btn-red {
  background: #E53935;
  color: #fff!important;
}

.active-btn-pink {
  background: #D81B60;
  color: #fff!important;
}

.active-btn-purple {
  background: #8E24AA;
  color: #fff!important;
}

.active-btn-deep-purple {
  background: #5E35B1;
  color: #fff!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="categories-sidebar-popup-menu-row fashion-btn">FASHION</div>
<div class="categories-sidebar-popup-menu-row garden-btn">GARDEN</div>
<div class="categories-sidebar-popup-menu-row technology-btn">TECHNOLOGY</div>
<div class="categories-sidebar-popup-menu-row auto-btn">AUTO</div>

Я знаю, что могу сделать что-то подобное для каждого из них:

$('.fashion-btn').click(function() {
  $(this).addClass("active-btn-red");
  $('.garden-btn').removeClass("active-btn-pink");
  $('.technology-btn').removeClass("active-btn-purple");
  $('.auto-btn').removeClass("active-btn-deep-purple");
});

Но, как я добавлюболее 20 элементов в моем меню, я хотел бы спросить, есть ли более умный / короткий способ сделать эту работу.

Answer 1

Как сказал @disinfor в комментариях, вы можете сделать что-то вроде этого:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="categories-sidebar-popup-menu-row fashion-btn" data-active-class ='active-btn-red '>FASHION</div>
<div class="categories-sidebar-popup-menu-row garden-btn">GARDEN</div>
<div class="categories-sidebar-popup-menu-row technology-btn">TECHNOLOGY</div>
<div class="categories-sidebar-popup-menu-row auto-btn">AUTO</div>

.categories-sidebar-popup-menu-row {
    padding: 10px 15px;
    cursor: pointer;
    display: block;
    position: relative;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 28px;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.5px;
    color:#555B66;
}

.fashion-btn.active {
   background:#E53935;color:#fff!important;
}

.garden-btn.active {
  background:#D81B60;color:#fff!important;
}

.technology-btn.active {
  background:#8E24AA;color:#fff!important;
}

.auto-btn.active {
  background:#5E35B1;color:#fff!important;
}

$(".categories-sidebar-popup-menu-row" ).each(function (){
  $(this).click(function(){
    clearStyle();
    $(this).addClass("active");
  });
});

function clearStyle(){
  buttonWithActive = $('.categories-sidebar-popup-menu-row.active');
  buttonWithActive.removeClass('active');
}