I am writing some javascript code to create a flashcard system. In this system, a flashcard is displayed to the user and he decides whether the card is difficult or easy. In this way, each card is sorted into two different groups that will be used later. For the following code, arr is the flashcard list while the difficultList and easyList are the two lists. I have also used jquery to run a function according to the class. So, if the button with difficult flashcard is clicked, difficultList is changed. Do note that as of now, the end() function simply logs 'END' to the console. Finally, the text variable used in nothing but an HTML element with id of text whose value is changed to display the question.

function mainFunc() {
    if (indexVal > arr.length) {
        end();
    } else {
        console.log(indexVal);
        text.innerHTML = arr[indexVal][0];
        $(".difficult").click(function () {
            indexVal += 1;
            difficultList.push(arr[indexVal]);
            mainFunc();
        })
        $(".easy").click(function () {
            indexVal += 1;
            mainFunc();
            easyList.push(arr[indexVal]);
        })
    }
}

mainFunc();

When the code runs for the first time, everything works fine. But when I click on any of the buttons during second flashcard, an error occurs and the value of indexVal increases by 2 instead of 1, causing some unexpected behaviour. I have made several attempts in debugging the code but to no avail. Any help would be greatly appreciated (the problem with the code, a new solution etc). Thank you!