Express Repeating jquery codes into looping : <p>Recently i was working with the UX of forms someting like login and registration form for just inspiration.I just coded in a row format without applying any logic to shorten it.</p>

<h2>Below is how i coded :</h2>

<pre><code>$('.form-content.minimized a').click(function(event) {
    event.preventDefault();
    $('.form-content.minimized').addClass('first_step', 
            setTimeout(function(){
                $('.form-content.minimized').addClass('second_step', 
                        setTimeout(function(){
                            $('.form-content.minimized').addClass('third_step', 
                                    setTimeout(function(){
                                        $('.form-content.minimized').addClass('fourth_step',
                                                setTimeout(function(){
                                                    $('.form-content.minimized').addClass('fifth_step ' + fifth_step , 
                                                            setTimeout(function(){
                                                                $('.form-content.minimized').addClass('opened');
                                                            }, 100)
                                                        )
                                                }, 600)
                                            );
                                    }, 400)
                                );
                        }, 200)
                    );
            }, 200)
        );

});
</code></pre>

<p>Here we can see there is happening something with stepping like staircase. <code>first_step</code> , <code>second_step</code> ..... 
And also a time interval is happening between every steps.</p>

<p>What about if we do something like <code>i=0</code> , <code>i++</code>, <code>i&lt;= something</code> in a loop.Then i think it would be more readable and maintainable. </p>
