stuck with loop or something else?

Question

I think I am making some mistakes when it comes to loop function. I have a quiz and i have four options. Every time I have chosen an answer and clicked on "nästa" it will store the selected answer, but in case if they change their mind and want back all the options they can click on the button "visa alla alternativ". To check if I am doing right I have appended which question it has been appeared. Every time I click on "nästa" the number of question will appear.

eg. 1 2 3 4 (I have clicked four time and four different question has been appeared).

But if I click on "visa alla alternativ" the number will be like this. 1 2 3 4 1 2 3 4. It depends on how many times I have clicked on "visa alla alternativ".

var answer = [];
var select; 

$(".option").on("click", click_question);

function nästa() {

    answer.push(select); 
    count_click();

    $(".option").each(function() {
        $(this).fadeTo("slow", 1);
        $(this).on("click", click_question);
    });

    $(this).fadeTo("slow", 0.2);
    $("#visa_alternativ").fadeTo("slow", 0.2);
    $("#tillbaka_question").fadeTo("slow", 1);

    clicks.length = 1;
}

function click_question() {

        $(".option").each(function() {
            $(this).fadeTo("slow", 0.1);
        });

        $(".option").off("click");

        $(this).fadeTo("slow", 1); 

        $("#visa_alternativ").fadeTo("slow", 1);
        $("#nästa").fadeTo("slow", 1);
        $("#nästa").on("click", nästa);

        select = $(this).text();
}

$("#visa_alternativ").on("click", function () {
            $(".option").each(function() {
                $(this).fadeTo("slow", 1);
            });

            $(".option").on("click", click_question);
            $(this).fadeTo("slow", 0.2);
            $("#nästa").fadeTo("slow", 0.2);
});

It is somehow that the function calls count_click();, where the function get us a random question. count_click(); is working properly but if I click on "Visa alla alternativ" it is calling more question depending on how many times I click on "visa alla anlternativ". Once before I had done something wrong with the each() and I asked the question here, but now I get similar problem but little bit different. I need help and tell me what I am doing wrong with the each() function ?

EDIT:

Well, found that if I put $("#nästa").on("click", nästa); outside of the function it is working, but not when I put it into the function, as you can see above? WHY?

Answer 1

It looks like you are binding the click_question function multiple times (which means it will run multiple times):

$(".option").on("click", click_question); // bound to each .option here
function nästa() {
    answer.push(select);
    count_click();
    $(".option").each(function () {
        $(this).fadeTo("slow", 1);
        $(this).on("click", click_question); // bound again as .each iterates through them.
    });
    $(this).fadeTo("slow", 0.2);
    $("#visa_alternativ").fadeTo("slow", 0.2);
    $("#tillbaka_question").fadeTo("slow", 1);
    clicks.length = 1;
}

Either don't bind multiple times, or use .one instead of .on.