Изменение цвета фона при прокрутке. Требуется для каждого элемента

Question

У меня есть код, который меняет цвет фона тела, когда появляется конкретный элемент. Моя проблема в том, что он работает только с первым элементом. Мне нужно, чтобы он работал для каждого элемента на странице.

Я мало знаю Jquery, но уверен, что где-то в моем коде нужен оператор each или foreach?

Например:

<div class="section">
     NORMAL
</div>

<div class="section swapbg-dark">
     THIS SHOULD RUN THE SCRIPT
</div>

<div class="section">
     NORMAL
</div>

<div class="section swapbg-dark">
     THIS SHOULD RUN THE SCRIPT
</div>

    $(window).scroll(function() {
        var top_of_element = $(".swapbg-dark").offset().top + 300;
        var bottom_of_element = $(".swapbg-dark").offset().top + $(".swapbg-dark").outerHeight();
        var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
        var top_of_screen = $(window).scrollTop();

        if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
            $('body').addClass('dark-theme');
        } else {
            $('body').removeClass('dark-theme');
        }
    });

Любая помощь была бы замечательной.