How to switch classes for several buttons at once?

Question

JavaScript

There are 3 buttons with icons, by clicking on one of them, instead of the previous icon, an icon with a cross appears. But here's the problem, if you click on another button, then the previous button does not change its property (that is, the cross is not replaced by the previous icon). And the question is how to change the class of the previous icon by clicking on another button? That is, for each icon, the icon should change to a cross, and the previous button should be deleted.

<!-- Кнопки -->
<div class="header__button">
  <button class="btn header__basket_btn"><i class="feather-shopping"></i></button>
        <button class="btn header__search_btn"><i class="feather-search"></i></button>
  <button class="btn header__user_btn"><i class="feather-user"></i></button>
</div>

The class should change from .feather-shopping to .feather-close.

Answer 1

As far as I understood the task, you need to make one choice from 3 buttons and the button that the user clicked has one picture, and the rest have another at this time.
I solved this not through classes, but by cloning elements and templates (template tag).
https://codepen.io/qmalmind/pen/yLMjPBg
To work with classes, they usually use:

someVar.classList.add("someClass"); // Добавляет класс
someVar.classList.remove("someClass"); // Убирает класс 
someVar.classList.toggle("someClass"); // По очереди добавляет, убирает

Answer 2

Alternatively, you can add a .feather-close icon inside each button, hidden by default, and on click on the button, show this icon and hide the original icon:

<!-- HTML -->

<div class="header__button">
    <button class="btn header__basket_btn">
        <i class="icon feather-shopping"></i>
        <i class="close-icon feather-close"></i>
    </button>
    <button class="btn header__search_btn">
        <i class="icon feather-search"></i>
        <i class="close-icon feather-close"></i>
    </button>
    <button class="btn header__user_btn">
        <i class="icon feather-user"></i>
        <i class="close-icon feather-close"></i>
    </button>
</div>

/* CSS */

.header__button .btn .close-icon {
    display: none;
}
.header__button .btn.close .icon {
    display: none;
}
.header__button .btn.close .close-icon {
    display: inline;
}

// JavaScript

$('.header__button .btn').click(function() {
    $(this).toggleClass('close');
});