タブを切り替えた際に片方のタブのサイドバーJSだけが反応しない

##現状
現在、タブで切り替えられるindex.htmlを作成しています。
そこでMaterializeを使用したサイドバーを作成しているのですが、
片方のタブ画面ではサイドバーが動くものの、
もう一方のタブ画面ではサイドバーが動きません。

##課題
具体的には以下のコードの、
「<!–案件のサイドメニュー–>」直下のコードでは予想通りの動きを示すのですが、
「<!–請求書のサイドメニュー–>」と直下のコードではバックグラウンドが暗くなるだけで、サイドメニューが開きません。

##相談内容
この場合、どの部分に問題があり、どのように修正をすればいいでしょうか。

##コード

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <link rel="stylesheet" href="css/styles.css" type="text/css" />
6    <!--MaterializeCSS-->
7    <link href="./css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
8    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
9    <!--Google Web Font-->
10    <link href="https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap" rel="stylesheet">
11    <!--Materialize JS-->
12    <script src="./js/materialize.js"></script>
13    <title>請求書＆ToDoアプリ</title>
14  </head>
15  <body>
16    <!-- タブのボタン部分 -->
17  <nav class="nav-extended">
18    <div class="nav-wrapper center-align">
19      <a href="#" class="brand-logo">Invoice&ToDo</a>
20      <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
21    </div>
22    <div class="nav-content">
23      <ul class="tabs tabs-transparent">
24        <li class="tab right"><a class="tab_btn is-active-btn tab" href="#todo">案件</a></li>
25        <li class="tab right"><a class="tab_btn tab" href="#invoice">請求書</a></li>
26      </ul>
27    </div>
28  </nav>
29          <!-- タブのコンテンツ部分 -->
30    <div class="tab_item is-active-item row" id="todo">
31      <!--案件のサイドメニュー-->
32      <div class="col s0 l2">
33        <ul id="slide-out" class="sidenav sidenav-fixed ">
34          <li><a href="#">クライアント一覧<i class="material-icons left">person</i></a></li>
35          <li><a href="#">案件カレンダー<i class="material-icons left">date_range</i></a></li>
36          <li><a href="todo/addClient.html">クライアント追加<i class="material-icons left">add</i></a></li>
37          <li><a href="todo/addItem.html">案件追加<i class="material-icons left">add</i></a></li>
38        </ul>
39      </div>
40        <!--案件のコンテンツ-->
41        <div class="container col s12 l10 card-panel light-blue accent-1">
42          <h4 class="center-align">クライアント一覧</h4>
43          <table class="clientList highlight centered">
44            <thead>
45              <tr>
46                <th>クライアント名</th>
47                <th>依頼件数</th>
48                <th>クライアント情報管理</th>
49              </tr>
50            </thead>
51            <tbody>
52              <tr>
53                <td><a href="todo/items.html">AAAA社</a></td>
54                <td>1件</th>
55                <td><a href="todo/editClient.html"><button type="button"class="btn-floating waves-effect blue btn-small"><i class="material-icons">mode_edit</i></button></a></td>
56              </tr>
57              <tr>
58                <td>BBBB社</td>
59                <td>5件</th>
60                <td><button type="button"class="btn-floating waves-effect blue btn-small"><i class="material-icons">mode_edit</i></button></td>
61              </tr>
62              <tr>
63                <td>CCCC社</td>
64                <td>10件</th>
65                <td><button type="button"class="btn-floating waves-effect blue btn-small"><i class="material-icons">mode_edit</i></button></td>
66              </tr>
67                           </tbody>
68          </table>
69        </div>
70    </div>
71           <div class="tab_item row" id="invoice">
72      <!--請求書のサイドメニュー-->
73      <div class="col s0 l2">
74        <ul id="slide-out" class="sidenav sidenav-fixed ">
75          <li><a href="invoice/user.html">ユーザー情報管理<i class="material-icons left">person</i></a></li>
76          <li><a href="invoice/invoice.html">請求済みの請求書<i class="material-icons left">call_made</i></a></li>
77        </ul>
78      </div>
79        <!--請求書のコンテンツ-->
80        <div class="container col s12 offset-l3">
81          <h2>請求書一覧</h2>
82          <div class="collection invoiceList">
83            <a href="invoice/invoice.html" class="collection-item">AAAA社</a>
84            <a href="#!" class="collection-item">BBBB社</a>
85            <a href="#!" class="collection-item">CCCC社</a>
86          </div>
87        </div>
88    </div>
89           <!-- タブボタンのJS -->
90      <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
91      <script>
92        $(function() {
93          /*クリックイベント*/
94          $('.tab_btn').on('click', function() {
95            $('.tab_item').removeClass("is-active-item");
96            $($(this).attr("href")).addClass("is-active-item");
97            $('.tab_btn').removeClass('is-active-btn');
98            $(this).addClass('is-active-btn');
99          });
100        });
101      </script>
102      <!--　サイドバーの初期化用JS　-->
103      <script>
104        document.addEventListener('DOMContentLoaded', function() {
105          var elems = document.querySelectorAll('.sidenav');
106          var instances = M.Sidenav.init(elems, {});
107        });
108      </script>
109  </body>
110</html>
111