ボタンのアニメーションがうまくいかない

実現したいこと

アニメーションをうまく実装したい

発生している問題・分からないこと

一番上のボタンアニメーションはうまく実装出来ているのですが、二番目のボタンを押してもアニメーションが実行されません。ご教示の方お願い致します。

該当のソースコード

html

1 <div class="faq_container">2 <h2 class="faq_text">FAQ</h2>3 <div class="open">4 <div class="open_1">5 <div class="question">6 <p class="question_serif">Q.</p>7 <p class="question_sans">肌にアレルギーがあるのですが施術を受けることはできますか？</p>8 <button class="square_btn"></button>9 </div>10 <div class="answer">11 <p class="answer_serif">A.</p>12 <p class="answer_sans">カウンセリング時に医師にご相談ください。</p>13 </div>14 </div>15 <div class="open_1">16 <div class="question">17 <p class="question_serif">Q.</p>18 <p class="question_sans">どれくらいの期間通うことになりますか？</p>19 <button class="square_btn"></button>20 </div>21 <div class="answer">22 <p class="answer_serif">A.</p>23 <p class="answer_sans">症状や施術内容によって変わりますが、半年〜1年通っていただく方が多いです。</p>24 </div>25 </div>26 <div class="open_3">27 <div class="question">28 <p class="question_serif">Q.</p>29 <p class="question_sans">途中で解約することはできますか？</p>30 <button class="square_btn"></button>31 </div>32 <div class="answer">33 <p class="answer_serif">A.</p>34 <p class="answer_sans">いつでも途中解約することが可能です。月の途中で解約される場合はその月の月額料金は発生し<br>てしまいますので、予めご了承ください。</p>35 </div>36 </div>37 <div class="open_4">38 <div class="question">39 <p class="question_serif">Q.</p>40 <p class="question_sans">アロマは何種類ありますか？</p>41 <button class="square_btn"></button>42 </div>43 <div class="answer">44 <p class="answer_serif">A.</p>45 <p class="answer_sans">常時50種類以上のアロマをご用意しております。ご指定の香りがある場合はカウンセリング時に<br>ご相談ください。</p>46 </div>47 </div>48 <div class="open_5">49 <div class="question">50 <p class="question_serif">Q.</p>51 <p class="question_sans">施術当日はお化粧をしたままで良いですか？ </p>52 <button class="square_btn"></button>53 </div>54 <div class="answer">55 <p class="answer_serif">A.</p>56 <p class="answer_sans">施術前にお化粧を落としていただくお部屋をご用意しておりますので、お化粧をしたままご来店<br>いただけます。 </p>57 </div>58 </div>59 </div>60 </div>61

css

1.faq_container {2 max-width: 953px;3 margin: 42px auto 0;4}5 6.faq_text {7 font-size: 48px;8 font-family: "Noto Serif JP";9 color: #0097a7;10 text-align: center;11 font-weight: 700;12 letter-spacing: 3px;13 padding-left: 8px;14}15 16.open {17 margin-top: 56px;18}19 20.question_serif, .answer_serif {21 font-size: 24px;22 font-family: "Noto Serif JP";23 color: #0097a7;24 font-weight: 700;25 letter-spacing: .7px;26}27 28.question_sans {29 font-size: 18px;30 color: #0097a7;31 padding-top: 4px;32 margin-bottom: 15px;33}34 35.answer_sans {36 font-size: 18px;37 padding-top: 5px;38}39 40.question {41 display: flex;42 gap: 10px;43 border-bottom: 2px solid #0097a7;44 position: relative;45}46 47.answer {48 display: flex;49 height: 0;50 overflow: hidden;51 overflow-y: auto;52 gap: 9px;53 margin-bottom: 10px;54}55 56.square_btn {57 width: 36.5px;58 height: 36.5px;59 background-color: #0097a7;60 position: absolute;61 top: 1px;62 right: 1px;63}64 65.square_btn::before {66 content: '';67 position: absolute;68 width: 18px;69 height: 2px;70 top: 0;71 left: 9px;72 bottom: 0;73 margin: auto;74 background-color: #ffffff;75 transition: .3s;76}77.square_btn.active::before {78 transform: translateX(-10px);79 opacity: 0;80}81 82.square_btn::after {83 content: '';84 position: absolute;85 width: 18px;86 height: 2px;87 top: 0;88 right: 10px;89 bottom: 0;90 margin: auto;91 background-color: #ffffff;92 transform: rotate(90deg);93 transition: .3s;94}95.square_btn.active::after {96 transform: rotate(0deg);97}98 99 100

java

1// クエスチョンの要素を取得2const quesTion = document.3querySelector(".question");4 5// スクエアボタンの要素を取得6const square_Btn = document.7querySelector(".square_btn");8 9// クエスチョンの要素がクリックされたら10quesTion.addEventListener 11("click", () => {12 square_Btn.classList.toggle 13 ("active");14})15

試したこと・調べたこと

上記の詳細・結果

検索しいろいろ試しましたが、うまくいきませんでした。

補足

特になし