jQueryのアコーディオンが効かない

前提・実現したいこと

初心者で初めての質問なので変な質問をしていたら申し訳ございません。質問に答えて頂けたら幸いです。iSaraの模写コーディングですです。
アコーディオン機能をやりたくてjQueryのslideToggleを使用して実現しようと考えているのですが、全く反応しません。の2か所slideToggleを使用している箇所があるのですが、1つ目は普通にできているのに2つ目は全く反応してくれないです。
html,css,jQueryともに2つにそんな違いはなく、なぜ片方だけ反応しないかわかりません。

発生している問題・エラーメッセージ

slideToggleまた、jQueryが反応しない。

エラーメッセージ

該当のソースコード

jQuery
1反応しないほう
2  $('.flow-box').click(function() {
3    $(this).next('.flow-box-right').slideToggle('fast');
4    $(this).toggleClass('flow-close');
5  });
6
7反応するほう
8  $('.ac').click(function() {
9    $(this).next('.accordion-inner').slideToggle('fast');
10    $(this).toggleClass('close active');
11  });

css
1反応しないほう
2
3.flow-box{
4  background-color: #fef5e0;
5  border-radius: 5px;
6  padding: 20px 35px;
7  overflow: hidden;
8}
9.flow-box-right{
10  display: none;
11  text-align: left;
12  font-size:14px;
13  font-weight: bold;
14}
15
16
17
18反応するほう
19
20.ac h2{
21  border:1px solid #e5e5e5;
22  border-radius: 5px;
23  box-shadow:0 3px #cacaca;
24  margin-bottom: 10px;
25  padding:15px 10px;
26}
27.ac h2:hover{
28  text-decoration:underline;
29}
30.accordion-inner{
31  display: none;
32  height:150px ;
33  font-size: 16px;
34  font-weight: bold;
35  padding: 10px 10px 20px 10px ;
36  border-bottom: 1px solid #e5e5e5;
37}

html
1反応しないほう
2
3<div class="flow-box">
4        <div class="flow-box-left">
5          <img src="../img/isara/personwithlight.png">
6          <p>実案件を通して学ぶ</p>
7        </div>
8        <span class="flow-close"></span>
9        <div class="flow-box-right">
10          <p>現役フリーランスが抱える案件に加え、クラウドソーシングを使って実案件をこなします。</p>
11          <p>案件獲得のためのメールの書き方や見積りの仕方など、<br>
12            他のプログラミングスクールでは教えてくれない実務スキルを学ぶことができます。</p>
13          <p><span>＊現役フリーランスがサポートします。</span></p>
14        </div>
15      </div>
16
17
18反応するほう
19
20 <li class="ac accordion1">
21        <h2><i class="far fa-question-circle"></i>プログラミングスキルは必要ですか？ <span class="close"></span></h2>
22        <p class="accordion-inner">いいえ、必要ありません。しかし、iSaraでは参加費以上の金額が稼げることを保障しています。 従って、事前通話面談時点で簡単なテストを実施し、場合によってはお断りをしております。この点だけはご了承ください</p>
23      </li>

試したこと

調べたところ、heightの指定がなくてはいけないと書いてあったので、指定して見ましたが変わらず反応せず、しかも反応するほうにheightの指定がないからそれではないのかなと思います、、
htmlのulかdivの違いなのでしょうか？？

補足情報（FW/ツールのバージョンなど）

そもそも他にも反応しないjQueryがあるのでそれ自体がおかしいのでしょうか？
head内に

行動規範の内容に同意します

回答1件

一つ目のコードはHTMLと構造があっていないコードです。

js
1  $('.flow-box').click(function() { // .flow-boxをクリックしたとき
2    $(this) // .flow-boxのこと。
3        .next('.flow-box-right') // 自分（.flow-box）の次の兄弟要素を選択
4                                 // .flow-box-rightは.flow-boxの子孫要素
5        .slideToggle('fast'); // （nextがなければ特に何も起こらない）
6    $(this).toggleClass('flow-close'); // .flow-boxに.flow-closeを付けはずしする（なんのために？）
7  });