Реализация мини слайдера — почему в одном случае стрелка работает правильно, а в другом нет?

Всем привет В общем, я делаю свой мини слайдер, и на этом моменте я просто застрял, не понимаю в чем ошибка

Дело в том, что при нажатии на кнопку назад, слайдер меняет активный элемент, вот его код

$(".meal-small-slider-arrow--prev").on('click', function(){
            $(".meal-small-slider__item").each(function(i,v){
                if($(this).hasClass("meal-small-slider__item--is-active")){
                    if(i == 0){
                        return true;
                    }else{
                        let new_index = i - 1;
                        $(`.meal-small-slider__item`).removeClass("meal-small-slider__item--is-active")
                        $(`.meal-small-slider__item:eq(${new_index})`).addClass("meal-small-slider__item--is-active")
                    }
                }
            })
        })

А когда я пишу тот же код, только чтобы кнопка "вперед" работала также, т.е. при нажатии вперед, отслеживается индекс элемента, увеличивается, и к нему присвается активный класс, то здесь инкремент не срабатывает никак. Проводил тест в консоли, если инкремент стоит, то он выводит сразу все индексы начиная от текущего, а если убрать инкремент, оставить просто присваивание, то выводит один индекс.

$(".meal-small-slider-arrow--next").on('click', function(){
            $(".meal-small-slider__item").each(function(i,v){
                if($(this).hasClass("meal-small-slider__item--is-active")){
                    if(i == 4){
                        return true;
                    }else{
                        console.log(i)
                        let new_index = ++i;
                        $(`.meal-small-slider__item`).removeClass("meal-small-slider__item--is-active")
                        $(`.meal-small-slider__item:eq(${new_index})`).addClass("meal-small-slider__item--is-active")
                    }
                }
            })
        })

Пожалуйста, помогите, я уже замучался:) Cпасибо