Кнопка переключения не удаляет класс должным образом

Может ли кто-нибудь помочь с этим javascript?

Я хотел бы использовать кнопку переключения, чтобы отображать и скрывать некоторые DIV.

При первом нажатии кнопки (с #sidebarCollapse) я хочу, чтобы отображались 2 блока с именами #sidebar и .overlay, а при нажатии той же кнопки (с #sidebarCollapse) во второй раз он удалит класс из двух вышеуказанных блоков (#sidebar. / .overlay. Активный)

Я установил css правильно, но не знаю, как использовать javascript.

Пожалуйста, взгляните на следующий javascript, он не удаляет класс .overlay.active, когда я нажимаю кнопку (с #sidebarCollapse) во второй раз.

Вы бы помогли с этим?

Заранее большое спасибо!

$(document).ready(function () {

     $('#sidebarCollapse').on('click', function () {
         $('#sidebar').toggleClass('active');
         $('.overlay').addClass('active');
         $(this).toggleClass('active');
     });

     $('.overlay').on('click', function () {
        $('#sidebar').removeClass('active');
        $('.overlay').removeClass('active');
        $(this).removeClass('active');

     });
 });