[Solved] Jquery Multi-Step Form [closed]

Question

FYI:

I gave a detailed answer. So, please read the answer fully and understand what are all the changes I made in your code.

Answer in Detail:

Give Identification for each fieldset to work as per your requirement. do like below,

<fieldset id="firstField"> <!-- First Step -->
<fieldset id="mathsField"> <!-- Maths -->
<fieldset id="scienceField"> <!-- Science -->

Your js code is working based on .next and .previous classes. So, we should put our logic to change that flow. You already assigned name for buttons math and science like below,

<input type="button" name="maths" class="next action-button" value="Math" />
<input type="button" name="science" class="next action-button" value="Science" />

So, In $(".next").click(function(){ }); just check if the clicked button is math or science by button name and set that corresponding fieldset DOM to variable next_fs like below code,

if($(this).attr('name') == 'maths')
    next_fs = $('#mathsField');
if($(this).attr('name') == 'science')
    next_fs = $('#scienceField');

and in $(".previous").click(function(){ }); set #firstField DOM to variable previous_fs like below code,

previous_fs = $('#firstField');

SEE THIS JSFIDDLE DEMO

Accepted Answer