jQueryでクラスをつけたり消したりうまくいかない

.modal-button-wrap__buttonをクリックするとクラスactiveをつけたり消したりしてアニメーションを実装したいです。
こちらは方法１のトグルでうまくいきました。

ただ、.modal-button-wrapbuttonをクリックした時に、クラスactiveがついて、.overlay-haikeikurokariをクリックした時に、
.modal-button-wrapbuttonのクラスactiveが消えてアニメーションが終了するようにできません。
デブツールズでみると、.modal-button-wrap__buttonのクラスactiveが消えておらず残ってしまっています。
なぜ残ってしまうのでしょうか？どこに問題があるか教えてください。
どちらの方法でも同じ結果です。

方法1```ここに言語を入力

<!-- drawermenu-button-three-whiteline-クリックした際にクルット回るアクション -->  
            <script>  
            $(function(){  
                $('.modal-button-wrap__button').click(function(){  
                    //ulをクリックすると、メニューが戻る  
                    $(this).addClass('active');  
                });  
            });  
            </script>  

            <!-- drawermenu-button-three-whiteline-クリックした際にクルット回るアクション -->  
            <script>  
            $(function(){  
                $('.overlay-haikeikurokari').click(function(){  
                    //ulをクリックすると、メニューが戻る  
                    $('.modal-button-wrap__button').removeClass('active');  
                });  
            });  
            </script>

方法2

ここに言語を入力

<!-- drawermenu-button-three-whiteline-クリックした際にクルット回るアクション -->  
<script>  
$(function(){  
$('.modal-button-wrap__button').on('click', function() {  
$(this).toggleClass('active');  
                         return false;  
                    });  
                });  
            </script>  

            <!-- blackbackground-クリックした際にクルット回るアクション- -->  
            <script>  
            $(function(){  
                $('.overlay-haikeikurokari').click(function(){  
                    //ulをクリックすると、メニューが戻る  
                    $('.modal-button-wrap__button').removeClass('active');  
                });  
            });  
            </script>

・その他（js）  

<!-- drawermenu-blackbackground -->  
            <script>  
                //5回目モーダルウィンドウ  
                // #course figureをクリック  
                $('.modal-button-wrap__button').click(function(){  
                  //透明の背景、オーバーレイのhtmlを作る  
                  $('body').append('<div class="overlay-haikeikurokari"></div>');  
                  //透明の背景、オーバーレイをフェードイン  
                  $('.overlay-haikeikurokari').fadeIn('slow');  

                  $('.overlay-haikeikurokari, .close').off().click(function(){  
                      ///透明の背景をフェードアウト  
                      $('.overlay-haikeikurokari').fadeOut('slow');  
                      // 透明の背景オーバーレイはフェードアウトしてから削除  
                      $('.overlay-haikeikurokari').fadeOut('slow', function(){  
                        $('.overlay-haikeikurokari').remove();  
                    });  
                  });  
                });  
            </script>  



・HTML  
            ```ここに言語を入力
<!-- drawermenu-button -->
            <div class="modal-button-wrap">
                <a class="animation-hover action-hover modal-button-wrap__button">
                    <span class="modal-button-wrap__border"></span><!-- border -->
                    <span class="modal-button-wrap__border"></span><!-- border -->
                    <span class="modal-button-wrap__border"></span><!-- border -->
                </a>
            </div>