ハンバーガーメニューのjsが全く動かなくなりました。

web制作を勉強中の者です。よろしくお願いいたします。

現在ポートフォリオを作成しており、レスポンシブ対応をしているところなのですが、ヘッダーのハンバーガーメニューで詰まっています。

下記Codeのjs内で、".openbtn"の"this"のみ指定する内容で完結するときちんと動くのですが、それ以上にコードを記載("#g-nav"や".circle-bg"など)すると、アニメーションが全く動かなくなりました。

"#g-nav"や".circle-bg"の箇所や、入子関係がおかしいのかもしれないと思っているのですが、原因を探して見ても全く解決できそうになく、こちらで質問させていただくことにいたしました。

何かヒントだけでもいただけないでしょうか。
お忙しい中恐縮ですが、よろしくお願いいたします。
（「動くwebデザインアイデア帳」という書籍を参考にコードを書きました。）

Code
https://github.com/kobato-bocchi/portfolio...git

GitHub page
https://kobato-bocchi.github.io/portfolio../

html
1    <header class="header">
2        <div class="header__bg">
3        <div class="header__contents">
4            <div class="header__logo">
5                <a href=""><img src="./img/logo.png" alt=""></a>
6            </div>
7            <nav id="g-nav">
8                <div class="openbtn">
9                    <span></span>
10                    <span></span>
11                    <span></span>
12                </div>
13                <div class="circle-bg"></div>
14            <div id="g-nav-list">
15                <ul>
16                    <li><a href="#">home</a></li>
17                    <li><a href="#works">works</a></li>
18                    <li><a href="#skill">skill</a></li>
19                    <li><a href="#services">services</a></li>
20                    <li><a href="#contact">contact</a></li>
21                </ul>
22            </div>
23            </nav>
24        </div>
25        </div>
26    </header>

js
1$(".openbtn").click(function () {
2    $(this).toggleClass('active');
3    $("#g-nav").toggleClass('panelactive');
4    $(".circle-bg")toggleClass('circleactive');
5});
6$("#g-nav a").click(function () {
7    $(".openbtn").removeClass('active');
8    $("#g-nav").removeClass('panelactive');
9    $(".circle-bg").removeClass('circleactive');
10});

scss
1/* ================================
2header
3================================ */
4.header {
5    height: 100px;
6    position: fixed;//スクロールしてもついてくる
7    width: 100%;
8    box-shadow: 0 3px 3px rgba( #000, 0.16); 
9    z-index: 100;
10    top: 0;
11    left: 0;
12
13    @include mq('tab') {
14        height: 70px;
15    }
16
17    @include mq('sp') {
18        height: 60px;
19    }
20}
21.header__bg {
22    background: url(../img/hiroyoshi-urushima-D2dyWf0NImU-unsplash.jpg) no-repeat center center / cover;
23    display: flex;
24    justify-content: space-around;
25    height: inherit;
26}
27.header__contents {
28    width: 85%;
29    display: flex;
30    justify-content: space-between;
31    align-items: center;
32
33    @include mq('sp') {
34        width: 100%;
35    }
36}
37.header__logo {
38    // padding-left: 100px;
39
40    @include mq('sp') {
41        padding-left: 30px;
42    }
43
44    a {
45
46    }
47    img {
48        width: 50%;
49        padding-top: 12px;
50    }
51
52}
53#g-nav {
54    padding-right: 30px;
55
56    @include mq('sp') {
57        position: absolute;
58        right: 0;
59
60        ul {
61            opacity: 0;
62            position: absolute;
63            z-index: 999;
64            top: 50%;
65            left: 50%;
66            transform: translate(-50%, -50%);
67        }
68    }
69}
70#g-nav.panelactive {
71    @include mq('sp') {
72
73        position: fixed;
74        z-index: 999;
75        top: 0;
76        width: 100%;
77        height: 100vh;
78        
79        #g-nav-list {
80            display: block;
81        }
82        
83        ul {
84            opacity: 1;
85            
86            li {
87                animation-name: gnaviAnime;
88                animation-duration: 1s;
89                animation-delay: .2s;
90                animation-fill-mode: forwards;
91                opacity: 0;
92            }
93        }
94    }
95}
96#g-nav-list {
97    ul {
98        display: flex;
99        // padding-right: 100px;
100        align-items: center;
101        margin-left: auto;
102        
103        li {
104            &:not(:first-child) {
105                margin-left: 40px;
106            }
107            
108            a {
109                color: #fff;
110                text-decoration: none;
111                font-weight: 700;
112                // position: relative;
113            }
114        }
115    }
116
117    @include mq('sp') {
118        display: none;
119        position: fixed;
120        z-index: 999;
121        width: 100%;
122        height: 100vh;
123        overflow: auto;
124        -webkit-overflow-scrolling: touch;
125    }
126}
127@include mq('sp') {
128    @keyframes gnaviAnime {
129        0% {
130            opacity: 0;
131        }
132        100% {
133            opacity: 1;
134        }
135    }
136}
137.circle-bg {
138    @include mq('sp') {
139        position: fixed;
140        z-index: 3;
141        // 丸の形
142        width: 100px;
143        height: 100px;
144        border-radius: 50%;
145        background: #999;
146        // 丸のスタート位置と形状
147        // scaleを始めは0に
148        transform: scale(0);
149        right: -50px;
150        top: -50px;
151        // 0.6秒かけてアニメーション
152        transition: all .6s;
153    }
154}
155.circle-bg.circleactive {
156    @include mq('sp') {
157        transform: scale(50);
158    }
159}
160nav {
161    @include mq('sp') {
162        ul {
163            list-style: none;
164            text-align: center;
165        }
166        li,
167        a {
168            display: inline-block;
169            text-decoration: none;
170            color: #000;
171            padding: 10px;
172        }
173    }
174}
175// ハンバーガーメニューボタンーーーーーーーーーーーーーーー
176// ボタン外側
177@include mq('sp') {
178    .openbtn {
179        position: relative;
180        // position: fixed;
181        background: #d54884;
182        cursor: pointer;
183        width: 50px;
184        height: 50px;
185        border-radius: 5px;
186        
187        // ボタン内側
188        span {
189            display: inline-block;
190            transition: all .4s; //アニメーションの設定
191            position: absolute;
192            left: 14px;
193            height: 2px;
194            border-radius: 5px;
195            background: #fff;
196            width: 45%;
197
198            &:nth-of-type(1) {
199                top: 13px;
200            }
201            &:nth-of-type(2) {
202                top: 19px;
203            }
204            &:nth-of-type(3) {
205                top: 25px;
206
207                &::after { //3つ目の要素のafterにMENU表示を指定
208                    content: "Menu";
209                    position: absolute;
210                    top: 5px;
211                    left: -2px;
212                    color: #fff;
213                    font-size: 0.6rem;
214                    text-transform: uppercase;
215                }
216            }
217        }
218    }
219    .openbtn.active {
220        span {
221            &:nth-of-type(1) {
222                top: 14px;
223                left: 18px;
224                transform: translateY(6px) rotate(-45deg);
225                width: 30%;
226            }
227            &:nth-of-type(2) {
228                opacity: 0;
229            }
230            &:nth-of-type(3) {
231                top: 26px;
232                left: 18px;
233                transform: translateY(-6px) rotate(45deg);
234                width: 30%;
235
236                &::after {
237                    content: "Close";
238                    transform: translateY(0) rotate(-45deg);
239                    top: 5px;
240                    left: 4px;
241                }
242            }
243        }
244    }
245}
246// ーーーーーーーーーーーーーーーーーーーーーーーーー