【HTML,CSS・jQuery】スクロールしていき、特定のID名(同じID名が複数ある)が画面上に現れたら関数を実行させていきたい

Question

画面をスクロールしていき、特定のID名が現れた時に関数（フェードイン）を実行させたいです。
特定のID名(id="is-fadeAnimeTrigger")はJS関数を発火させるトリガーとして配置していて全て同名となっており、HTML内に複数存在しています。
each文で繰り返し処理させようとしましたが１個目以降動くことはありませんでした。
eachだとHTML上に存在する特定の要素を全て取得できると思ったのですが、、。

やはり各々のクラス名に引っ掛けるしか方法はないのでしょうか。
なにかいい方法があれば教えていただきたいです。
よろしくおねぎいします。

<section class="l-topics">
  <div class="p-topics">
    <div class="p-topics__icon">
      <img src="{{ root }}/assets/img/topics.png" alt="" />
      <p class="p-topics__title">Topics</p>
    </div>
    <div class="p-topics__content">
      <div class="p-topics__post-wrap" id="is-fadeAnimeTrigger">
        <div class="p-topics__post">
          <p class="p-topics__image">
            <img src="{{ root }}/assets/img/post_image_news.jpg" alt="" />
          </p>
          <p class="p-topics__post-title">予約</p>
          <p class="p-topics__details">2021/07 | News</p>
        </div>
        <div class="p-topics__post">
          <p class="p-topics__image">
            <img src="{{ root }}/assets/img/post_image_news.jpg" alt="" />
          </p>
          <p class="p-topics__post-title">予約</p>
          <p class="p-topics__details">2021/07 | News</p>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="l-concept">
  <div class="p-concept">
    <div class="p-concept__heading-wrap">
      <p class="c-heading">concept</p>
      <p class="p-concept__heading-eng" id="is-fadeAnimeTrigger">
        umai
      </p>
      <p class="p-concept__heading-ja" id="is-fadeAnimeTrigger">
        美味いもの
      </p>
    </div>
    <p class="p-concept__details">
      美味いもの
    </p>
  </div>
</section>

$(function () {

  const fadeInAnimation = () => {
    // eslint-disable-next-line no-unused-vars
    var index = 0;
    const fadeAnimeTrigger = $("#is-fadeAnimeTrigger");
    $(window).on('scroll', function (){
      fadeAnimeTrigger.each(function() {
        let position = $(this).offset().top;
        let scroll = $(window).scrollTop();
        let windowHeight = $(window).height();
        if (scroll > position - windowHeight + 50){
          $(this).addClass("is-fadeUpTrigger");
        }
        index++;
        console.log(index);
      });
    });
  }

  fadeInAnimation();
});

Answer 1

特定のID名(id="is-fadeAnimeTrigger")はJS関数を発火させるトリガーとして配置していて全て同名となっており、HTML内に複数存在しています。

idは一つのHTML内でユニークである必要があります。複数ある場合は、最初のものだけしか取得できません。
idではなくclassにすればいいでしょう。

Comments

[KY1212]

IDの命名は一意でないといけないんですね。
クラスに置き換えることで思い通りの挙動になりました！
回答ありがとうございます！

Answer 2

同じIDを複数HTML要素に振ることで各要素にアクセスすることはできますが
違反なのでやめてください

• id - HTML: HyperText Markup Language | MDN

※実験的に処理はできますが動作は保証されません

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  console.log(document.querySelectorAll('#hoge').length);//3
  console.log(document.querySelectorAll('#hoge')[2].textContent);//hoge3
});
</script>
<div id="hoge">hoge1</div>
<div id="hoge">hoge2</div>
<div id="hoge">hoge3</div>

Comments

[KY1212]

IDの命名は一意でないといけないんですね。
勉強不足でした、、回答いただきありがとうございます！

Answer 3

const fadeAnimeTrigger = $("[id=is-fadeAnimeTrigger]")とすれば動作すると思いますが、文法的にはhatena19さんのご指摘の通りです。