Step by step form using jQuery hiding wrong divs on clicking back on first step
<p>I've created a step by step form that uses jQuery to step through 3 steps.</p>

<p>On the first step, how can I adjust the jQuery to hide my <code>customise</code> div and show the <code>entire_product</code> div when I click back?</p>

<p>At the moment when I click back on the first step it's hides all the divs.</p>

<hr>

<p>I'm using jQuery to initially show the <code>entire_product</code> div then when the link is clicked, it hides the <code>entire_product</code> div and shows the <code>customise</code> div instead (code is below).</p>

<pre><code>&lt;div class="entire_product"&gt;
    Content here.
    &lt;a id="customise" class="configure-demo" href="#"&gt;Configure new system &amp;amp; get quote&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>This is the <code>customise</code> div:</p>

<pre><code>&lt;div class="customise" style="display:none;"&gt;
    &lt;form id="customisesystem" method="post" action=""&gt;
        &lt;div id="first-step"&gt;
            &lt;div class="steps"&gt;
                &lt;p&gt;&lt;b&gt;Step 1 of 3&lt;/b&gt;&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="progress-buttons"&gt;&lt;/div&gt;
            &lt;div class="clear"&gt;&lt;/div&gt;

            &lt;div id="customise-area"&gt;
                &lt;p&gt;Options 1&lt;/p&gt;

                &lt;div id="customise-area"&gt;
                    &lt;input type="checkbox" name="hardware[]" value="&lt;?php the_title(); ?&gt;"&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div id="second-step"&gt;
            &lt;div class="steps"&gt;
                &lt;p&gt;&lt;b&gt;Step 2 of 3&lt;/b&gt;&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="progress-buttons"&gt;&lt;/div&gt;
            &lt;div class="clear"&gt;&lt;/div&gt;

            &lt;div id="customise-area"&gt;
                &lt;p&gt;Options 2&lt;/p&gt;

                &lt;div id="customise-area"&gt;
                    &lt;input type="checkbox" name="software[]" value="&lt;?php the_title(); ?&gt;"&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;      

        &lt;div id="third-step"&gt;
            &lt;div class="steps"&gt;
                &lt;p&gt;&lt;b&gt;Step 3 of 3&lt;/b&gt;&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="progress-buttons"&gt;&lt;/div&gt;
            &lt;div class="clear"&gt;&lt;/div&gt;

            &lt;div id="customise-area"&gt;
                &lt;p&gt;Options 3&lt;/p&gt;

                &lt;div id="customise-area"&gt;
                    &lt;input type="submit" name="submit" id="submit" value="submit" /&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;      
    &lt;/form&gt;
&lt;/div&gt;
</code></pre>

<p>I then have a load of jQuery, that is creating back and next buttons to step through the 3 steps:</p>

<pre><code>&lt;script type="text/javascript"&gt;
var prevLink = '&lt;a class="back" href="#"&gt;Back&lt;/a&gt;';
var nextLink = '&lt;/a&gt;&lt;a class="next" href="#"&gt;Next&lt;/a&gt;';
var navHTML = '&lt;div class="prev-next"&gt;' +
                         prevLink +
                         nextLink +
                      '&lt;/div&gt;';
var prevLink = '&lt;a class="back" href="#"&gt;Back&lt;/a&gt;';
var nextLink = '&lt;/a&gt;&lt;a class="next" href="#"&gt;Next&lt;/a&gt;';
var navHTML = '&lt;div class="prev-next"&gt;' +
                         prevLink +
                         nextLink +
                      '&lt;/div&gt;';
jQuery(document).ready(function( $ ) {
            // init
            $('#customisesystem &gt; div')
                .hide()
                .prepend(navHTML);
            $('#first-step .prev').remove();
            $('#last-step .next').remove();

            // show first step
            $('#first-step').show();

            $('a.next').click(function(){
                var whichStep = $(this).parent().parent().attr('id');

                if( whichStep == 'first-step' )
                {
                    // validate first-step
                }
                else if( whichStep == 'second-step' )
                {
                    // validate second-step
                }
                else if( whichStep == 'last-step' )
                {
                    // validate last-step
                }

                $(this).parent().parent().hide().next().show();
            });

            $('a.back').click(function(){
                $(this).parent().parent().hide().prev().show();
            });
        });


jQuery(document).ready(function( $ ) {
$("#customise").click(function(){
    $(".entire_product").hide();
    $(".customise").show();
});
});
&lt;/script&gt;
</code></pre>
