button is not responding click once class is changed with jquery

Question

I have 4-5 div and need to hide and show them on the click of next button. so, I am changing the class of the button on every click. But my button is responding click for the first time and later class is changing but not responding click to the current class.

Here is My code Sample:

$(".next_btn.second").on("click",function(){ alert("second");
        $(".ugc_page.second").addClass("hide");
        $(".ugc_event3.second").addClass("hide");
        $(".ugc_page.third").removeClass("hide");
        $(".next_btn").removeClass("second").addClass("third");
        $(".previous_btn").removeClass("second").addClass("active third");

    });

    $(".next_btn.third").on('click',function() {alert('third');
        $(".ugc_page.third").addClass("hide");
        $(".ugc_page.fourth").removeClass("hide");
        $(".next_btn").removeClass("third").addClass("fourth");
        $(".previous_btn").removeClass("third").addClass("active fourth");
    });

On first click, it is changing the class to third but when click alert is second only.

Answer 1

Best way is to use Index of the element div as the trigger for hiding.

Then on your javascript declare a var count = 0

Each Click of next increment the count .

 $('#next-button').on("click" function(){ count++; // increment (decrement if its prev-button) $('.DIV_class').fadeOut(0); // hide all class $('.DIV_class').eq(count).fadeIn(0); // will show only the index of that class. }); 

Its more easy to maintain and readable.

I haven't tested this code but hope it give you idea.