Почему next() пропускает два следующих блока и бросает класс на третий?

Question

Елена @HelenStar

Начинающий frontend

JavaScript

Почему next() пропускает два следующих блока и бросает класс на третий?

Вроде бы простой скрипт, всегда юзала next(), но сейчас никак не могу понять, в чем прикол, и почему next() пропускает два следующих блока и кидает класс сразу на третий по счету блок?

html

<div class="section-7_content-wrap">
            <div class="section-7_content flex">
                <div class="photo-wrap flex column">
                    Некоторый контент
                </div>
                <div class="text-btn_wrap">
                    Некоторый текст
                    <div class="btn-next">
                        <button class="js-btn-next"><span>Следующий проект</span></button>
                    </div>
                </div>
            </div>
            <div class="section-7_content flex">
                <div class="photo-wrap flex column">
                    Некоторый контент
                </div>
                <div class="text-btn_wrap">
                    Некоторый текст
                    <div class="btn-next">
                        <button class="js-btn-next"><span>Следующий проект</span></button>
                    </div>
                </div>
            </div>
            <div class="section-7_content flex">
                <div class="photo-wrap flex column">
                    Некоторый контент
                </div>
                <div class="text-btn_wrap">
                    Некоторый текст
                    <div class="btn-next">
                        <button class="js-btn-next"><span>Следующий проект</span></button>
                    </div>
                </div>
            </div>
            <div class="section-7_content flex">
                <div class="photo-wrap flex column">
                    Некоторый контент
                </div>
                <div class="text-btn_wrap">
                    Некоторый текст
                    <div class="btn-next">
                        <button class="js-btn-next"><span>Следующий проект</span></button>
                    </div>
                </div>
            </div>
        </div>

Скрипт:

$(function() {
    //Слайды на 7-м экране
    $('.section-7_content:first').addClass('active');
    $('.js-btn-next').click(function(e) {
        var $current = $('.section-7_content.active');
        $current.removeClass('active');
        $current.next('.section-7_content').addClass('active');
    });
});