I built an order form on a site and used some js to navigate through the order process. After one step is finished the user should click on the "next" button and then various `div` should show/hide:

```
$("#buttonShowStep2").click(function() {
    $(this).hide("blind", 200);
    $("#outerDivStep2").show("blind", 300, function() {
        $('html, body').animate({ scrollTop: $(".scrollToHeading2").offset().top - 20 });
        document.getElementById("checkHeading1").className = "orderChecked";
    });
});

$("#buttonShowStep3").click(function() {
    $(this).hide("blind", 200);
    $("#outerDivStep3").show("blind", 300, function() {
        $('html, body').animate({ scrollTop: $(".scrollToHeading3").offset().top - 20 });
        document.getElementById("checkHeading2").className = "orderChecked";
    });
});

$("#buttonShowStep4").click(function() {
    $(this).hide("blind", 200);
    $("#outerDivStep4").show("blind", 300, function() {
        $('html, body').animate({ scrollTop: $(".scrollToHeading4").offset().top - 20 });
        document.getElementById("checkHeading3").className = "orderChecked";
    });
});

```

As you can see the code is very... long. I tried to built a for loop around it to wrap it a little bit. Unfortunately it is not working. 

*Question*: Is it possible to built a `for` loop with multiple nested functions? Thanks for your help!

```
for (var i = 2; i <= 4; i++) {
    var buttonShowStep = "#buttonShowStep" + i;
    var outerDivStep = "#outerDivStep" + i;
    var scrollToHeading = ".scrollToHeading" + i;
    var checkHeading = "#checkHeading" + i -1;
        $(buttonShowStep).click(function() {
            $(this).hide("blind", 200);
            $(outerDivStep).show("blind", 300, function() {
                $('html, body').animate({ scrollTop: $(scrollToHeading).offset().top - 20 });
                document.getElementById(checkHeading).className = "orderChecked";
            });
    });
};

```