3つの要素を順番に下から上へフェードインする動作を、スクロールで要素が表示領域に入るたび繰り返したい。

前提

3つの要素を順番に下から上へフェードインする動作を
スクロールで要素が表示領域に入るたび繰り返したい。

実現したいこと

jQuery、css、htmlで、スクロールすると順番に下から上へフェードインするアニメーションを作っていますが、
スクロールで要素が画面内に入るたびに、繰り返す機能を作りたいです。

該当のソースコード

html

<div class="recruit_button"> <div class="button fadein">エンジニア<span class="font_test3">→</span></div> <div class="button fadein">営業<span class="font_test3">→</span></div> <div class="button fadein">PR・広報<span class="font_test3">→</span></div></div>

css

.fadein { opacity: 0; visibility: hidden; transform: translateY(30px); transition: all 1s;} .is-fadein { opacity: 1; visibility: visible; transform: translateY(0); transform: translateX(0);}

jQuery

$(".fadein").each(function () { const targetPosition = $(this).offset().top; const windowHeight = $(window).height(); const scroll = $(window).scrollTop(); if (scroll > targetPosition - windowHeight + 100) { $(function () { $('.fadein').each(function (i) { $(this).delay(i * 200).queue(function () { $(this).addClass("is-fadein"); }); }); }); } if (scroll > targetPosition + $(this).height() || scroll < targetPosition - windowHeight) { $(function () { $('.fadein').each(function (i) { $(this).delay(i * 200).queue(function () { $(this).removeClass("is-fadein"); }); }); }); } });

試したこと

$(this).removeClass("is-fadein");で繰り返し表示されるかと思ったのですが
一度しか反応しませんでした、
ご指摘お願いいたします。

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

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