jquery - ループのjQueryウェイポイント:divのフェードライン

Question

10 行の div が重なり合っており、ページの特定の .waypoint に到達するたびに 1 行の div をフェードさせようとしています。これは私が持っている jQuery コードですが、ページの上部から 40% に達したときに div の各行をフェードアウトさせるのではなく、単に div の 9 行目をフェードアウトさせ、9 行目だけにします。.waypoint 40% に達したときにすべての div/line がフェードするようにするにはどうすればよいですか?

for (var i = 1; i < 10; i++){
    $('.infinite-container' + i).waypoint(function () {
            $('.infinite-container' + i).fadeTo('slowly', 0);
    }, {offset: '40%'});
}

私のhtmlは次のようになります(infinite-container10まで上がります):

<div class="infinite-container1">
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
    <div class="infinite-item"></div>
</div>