jQueryが反応しない

Question

前提・実現したいこと

閲覧いただきありがとうございます。

jQueryの実装がうまくいかず困っています。
お力をかしていただけますとたすかります。

よろしくお願いいたします。

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

３つのボタン(MORE)があり、クリックするとslidetoggleの動きをします。
しかし1つ目のボタンしか反応しなくて困っています。

該当のソースコード

          <div class="company__box first">
            <div class="year-box">
              <div id="more">
                more
              </div>
            </div>
            <table>
              <th class="owner title">注文者</th>
            </table>
          </div>
          <div class="company__box sec">
            <div class="year-box">
              <div id="more">
                more
              </div>
            </div>
            <table>
              <th class="owner title">注文者</th>
            </table>
          </div>
          <div class="company__box third">
            <div class="year-box">
              <div id="more">
                more
              </div>
            </div>
            <table>
              <th class="owner title">注文者</th>
            </table>
          </div>

$(function () {
  $('#more').on('click', function () {
    $(this).parent('.year-box').next('table').slideToggle();
  });
});

#more {
  display: inline;
  background-color: #231815;
  color: #fff;
  padding: 0px 20px 2px;
  font-family: $mincho;
  cursor: pointer;
}

#more:hover {
  opacity:0.8;
}

.year {
  padding-left: 10px;
  display: inline-block;
  padding-bottom: 5px;
  margin-right: 7px;
}

.year-box {
  border-bottom: 2px solid #4d4d4d;
  margin-bottom: 15px;
}

table {
  display: none;
}

試したこと

jQueryを変更してみましたがだめでした。

$(function () {
  $('#more').on('click', function () {
    $(this).parent('.year-box').parent('.company__box').children('table').slideToggle();
  });
});

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

jQueryのリンク

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

ここにより詳細な情報を記載してください。

Answer 1

同一ページに同一IDは存在してはいけないというルールがありますので、一意になるように調整してください。

ただ、見た感じだとidではなくclassのほうが妥当な処理内容かと思います。

Comments

[HiroK59]

ご回答ありがとうございます。
反応しました！！原因が初歩的すぎて恥ずかしいです。笑

とても助かりました！