同じクラス名の要素を上からスクロールして表示された分だけアニメーションを効かせたい

Question

該当の要素までスクロールすると青い帯のようなものが横からにゅーっと出てくるアニメーションを実装させたいのですが、同じクラス名で指定しているためか最初のアニメーションが実行されると、下にある同じクラスの要素もスクロールを待たずに一緒に実行されてしまいます。
cssで.one_postというクラスが縦にいくつも並んでいて、アニメーションはその中のnth-of-type(4n+1)ずつ、それぞれスクロールするごとに動作させることになっています。

<script>

    jQuery(function(){
        let blue_band = $('.one_post:nth-of-type(4n+1)');
        let blue_top = blue_band.offset().top;
        let blueBand = "blueBand_";
        
        // 疑似要素のスタイルをまるっと指定する
        let blue_css = `
            .one_post:nth-of-type(4n+1)::before{
                position: absolute;
                content: "";
                display: inline-block;
                background: #6CA5E8 repeat-x;
                border-radius: 128px 0 0 128px;
                top: 0;
                width: 100%;
                height: 256px;
                z-index: 1;
                animation: slideIn 1.5s ease-in-out forwards; 
            }

            @keyframes slideIn {
                0%{
                    transform: translateX(95vw);
                    opacity: 1;
                }
                100%{
                    transform: translateX(2vw);
                    opacity: 1;
                }
            }`;

        // styleタグにblue_cssの記述をセットする
        let style = $('<style>');
        style.text(blue_css);

        $(window).scroll(function(){
            for(let i = 1; i <= blue_band.length; i++){
                let b_subject = blue_band.attr("id", blueBand+i);
                let scroll = $(window).scrollTop();
                let windowHeight = $(window).height();
                let b_top = b_subject.scrollTop();
                if(scroll >= b_top - windowHeight){
                    $('body').append(style);
                }
            }
        });
    });

最初、eachで試して一緒に実行されてしまったので、次に上記のfor文でidにそれぞれの数字を加えてみたのですが、結局同じ数字になってしまってアニメーションもやはり同じタイミングで動作してしまいました。
本当ならblue_band.attr("id", blueBand+i);のところをblue_band[i].attr("id", blueBand+i);としたかったのですが、「 TypeError: blue_band[i].attr is not a function 」とエラーになってしまったので、今は[i]を外しています。

こういったjqueryの個別の処理に対して、詰まることが多いように実感しております。
どうかお力をいただきたく、何卒宜しくお願い致します。

Answer 1

.each()を試してみてはどうでしょうか。
.each() | jQuery API Documentation

---

コメントを受けて追記

　どうやら、「idが同じ数字になってしまう」ということは問題ではなかったようなので、スクロールエフェクトに関する一般論的な回答を追記します。

　Intersection Observer を利用するのが楽だと思います。
JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA

---

　なお、スタイルを変更するのにstyle要素を差し込むのはやめた方がいいかと思います。

　以下の記事が参考になると思います。
スタイルとクラス

Comments

[of_the_europa]

ご対応ありがとうございます。

each()に変更してみましたが、自分の書き方が悪いのか、現状は変わりませんでした。

function moveAnime(b_top){
blue_band.each(function(i){
let scroll = $(window).scrollTop();
let windowHeight = $(window).height();
if(scroll >= b_top - windowHeight){
$('body').append(style);
}
});
}

$(window).scroll(function(){
moveAnime(blue_top);
});

引数のインデックスをうまく使いたかったのですが、$(this).eq(i).offset().top;などとすると、タイプエラーが発生するので諦めました。

[Lhankor_Mhy]

ご質問は「idが同じ数字になってしまう」というものではなかったのですか……？

[of_the_europa]

失礼いたしました。

function moveAnime(){
blue_band.each(function(i){
let b_subject = $(this).attr("id", blueBand+i);
let scroll = $(window).scrollTop();
let windowHeight = $(window).height();
let b_top = b_subject.offset().top;
if(scroll >= b_top - windowHeight){
$('body').append(style);
}
});

$(window).scroll(function(){
moveAnime();
});

とりあえずはこれで、idにそれぞれのインデックスを持たせることができました。
しかし、スクロールすると最初の要素に合わせて、次の要素も同時に動作するのは変わらないようです。
id付与じゃなくても、スクロールでなにか動作を切り分ける方法はないでしょうか。

[Lhankor_Mhy]

追記しました。