Implementation of a mini slider - why does the arrow work correctly in one case, but not in the other?

Question

JavaScript

Hello everyone
In general, I'm making my own mini slider, and at this moment I'm just stuck, I don't understand what the error is

. The fact is that when you click on the back button, the slider changes the active element, here is its code

$(".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")
                        }
                    }
                })
            })

And when I write the same code, only for the "forward" button to work the same way, i.e. when you press forward, the element index is tracked, increased, and an active class is assigned to it, then the increment does not work in any way here.
I conducted a test in the console, if the increment is on, then it displays all indexes at once, starting from the current one, and if you remove the increment, leave just assignment, then it displays one index.

$(".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")
                        }
                    }
                })
            })

Please help, I'm already tormented :)

Answer 1

The solution was to stop the execution of the condition through return false

$(".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")
                    return false;
                }
            }
        })
    })