jqueryで作ったハンバーガメニューの一部が動作しません。（mask のclass)と　bodyのスクロール固定）

jquery を使ってハンバーガーメニューを作っています。

ハンバーガーメニューをクリックすると、ナビメニューがでてくる動作までできたのですが、

メニューを開くとマスクがかかる部分があるのですが、

一瞬、display:block　のclassが付与されるのですが、　すぐにクラスが外れて　display:none; になってしまい
機能しません。

また、
body を　ハンバーガーメニューをクリックすると、スクロールができないように

body.noscroll{
position:fixed;
overflow:hidden;
}

と書いているのですが、これも機能しません。

何処がちがっているのでしょうか？

<nav id="navi">
          <ul class="list-nav container">
            <li><a href="index.html">トップ</a></li>
            <li><a href="about.html">サロンについて</a></li>
            <li><a href="menu.html">メニュー</a></li>
            <li><a href="notes.html">注意事項</a></li>
            <li><a href="recruit.html">求人情報</a></li>
          </ul>
          <!-- /.list-nav -->
        </nav>
        <!-- /#navi -->
        <div class="hamburger js-hamburger">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <!-- /.hamburger -->
        <div id="burger-musk"></div>
<div class="space"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

body {
  background-color:#000;
  color:#fff;
  font-family:'Noto Serif JP',serif;
  font-size: 1rem;

  }
/* 背景固定してスクロールバーを消す*/
body.noscroll{
  position:fixed;
  overflow:hidden;
}
.container{
  max-width:880px;
  margin:0 auto;
  padding:0 5%;
  width:100%;
}

/* 背景固定してスクロールバーを消す*/
body.noscroll{
  position:fixed;
  overflow:hidden;
}
#navi {
    width: 300px;
    height:100vh;
    background: #fff;
    padding: 25px;
    position: fixed;
    top: 0;
    left: -300px;
    bottom: 0;
    opacity: 0;
    overflow-y: auto;
    transition: 0.5s;
    z-index: 20;
  }
  #navi .list-nav{
    display:flex;
    justify-content:space-between;
    flex-direction:column;

   }
#navi .list-nav li a{
  color:#000;
  font-weight:bold;
  display:inline-block;
  }

#navi  .list-nav li a:hover{
 opacity:.7;
}

  #navi.open {
    left: 0;
    opacity: 1;
  }
  #navi ul.nav-menu {
    margin-bottom: 30px;
  }
  #navi ul li {
    padding: 10px 0;
  }







/*
ハンバーガ―メニュー
*/
.hamburger {
  display:block;
  width: 100px;
  height: 100px;
    position: fixed;
  top: 0;
  right: 0;
  z-index: 30;
  cursor: pointer;
  transition: 0.3s;
}
.hamburger:hover {
  opacity: 0.7;
}
/* ハンバーガーメニューの線の設定（メニューが閉じている時） */
.hamburger span {
  width: 50px;
  height: 2px ;
  background: #fff;
  position: absolute;
  left: 25px;
  transition: 0.3s ease-in-out;
}
/* 1本目の線の位置を設定 */
.hamburger span:nth-child(1) {
  top: 36px;
}
/* 2本目の線の位置を設定 */
.hamburger span:nth-child(2) {
  top: 50px;
}
/* 3本目の線の位置を設定 */
.hamburger span:nth-child(3) {
  top: 64px;
}
/*
ハンバーガーメニューの線の設定（メニューが開いている時）
1本目の線を-45度回転
*/
.hamburger.open span:nth-child(1) {
  top: 47px;
  left: 25px;
  background :#fff;
  transform: rotate(-45deg);
}
/* 2本目と3本目は重ねて45度回転 */
.hamburger.open span:nth-child(2),
.hamburger.open span:nth-child(3) {
  top: 47px;
  background: #fff;
  transform: rotate(45deg);
}

#burger-musk {
  display: none;
  transition: 0.5s;
}
#burger-musk.open {
   width: 100%;
  height: 100%;
  background-color: pink;
  cursor: pointer;
  display: block;
  opacity: 0.8;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
}




.space{
  width:400px;
  height:900px;
}


/*=================================================
    ハンバーガ―メニュー
    ===================================================*/
    $('.js-hamburger').on('click', function() {
      $('.hamburger').toggleClass('open');
      $('#navi').toggleClass('open');

      if ($('hamburger').hasClass('open')) {
        $('body').addClass('noscroll');
        $('#burger-musk').fadeToggle(300).addClass('.open');

      } else {
      $('body').removeClass('noscroll');

        $('#burger-musk').fadeToggle(300).removeClass('open');

      }
    });

    // #maskのエリアをクリックした時にメニューを閉じる
    $('#burger-musk').on('click', function() {
      $('#navi').removeClass('open');
    });

    // リンクをクリックした時にメニューを閉じる
    $('#navi a').on('click', function() {
      $('#navi').removeClass('open');
    });
// 　ナビをクリックした時にメニューを閉じる
    $('#navi').on('click', function() {
      $('#navi').removeClass('open');
    });

コードペンURL
検証ツールで起こる現象
説明動画URL

試した事

スペルチェック
jquery 記述確認
検証ツールで確認