title: jQuery multi step form, skip steps depending on selection
body: <p>I am creating a multi-step form based on this tutorial here: <a href="https://www.phpflow.com/php/multi-step-form-using-php-bootstrap-jquery/" rel="nofollow noreferrer">https://www.phpflow.com/php/multi-step-form-using-php-bootstrap-jquery/</a></p>
  
  <p>It's working perfectly fine if I need to simply navigate back and forth throughout the form. However, I need to be able to skip some steps depending on the users selection.</p>
  
  <p>I have two buttons for the purpose of the demo, they are named step 3 and step 4.</p>
  
  <p>When the user clicks on either they should be directed to the corresponding fieldset. </p>
  
  <p>I am just learning jQuery and have been struggling with this for days. If anyone could point in the direction, I would be so grateful.</p>
  
  <p>I have created a fiddle which I hope helps.</p>
  
  <pre><code>https://jsfiddle.net/0pf6xavq/
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div class="container"&gt;
    &lt;div class="py-5 text-center"&gt;
      &lt;h2&gt;Application form&lt;/h2&gt;
    &lt;/div&gt;
  
    &lt;div class="row"&gt;
  
      &lt;div class="col-md-12"&gt;
        &lt;!--&lt;div class="progress"&gt;
          &lt;div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"&gt;&lt;/div&gt;
        &lt;/div&gt;--&gt;
        &lt;form id="applicationForm" class="needs-validation" novalidate&gt;
          &lt;fieldset&gt;
        &lt;h4 class="mb-3"&gt;Site Details&lt;/h4&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-md-6 mb-3"&gt;
              &lt;label for="clientName"&gt;Name&lt;/label&gt;
              &lt;input type="text" class="form-control" id="clientName" placeholder="" value="" required&gt;
              &lt;div class="invalid-feedback"&gt;
                Valid Name is required.
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="mb-3 mt-4"&gt;
            &lt;label for="address"&gt;Address&lt;/label&gt;
            &lt;input type="text" class="form-control" id="address" required&gt;
            &lt;div class="invalid-feedback"&gt;
              Please enter site address.
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="mb-3"&gt;
            &lt;label for="address2"&gt;Address &lt;span class="text-muted"&gt;(Optional)&lt;/span&gt;&lt;/label&gt;
            &lt;input type="text" class="form-control" id="address2"&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
            &lt;div class="col-md-4 mb-3"&gt;
              &lt;label for="town"&gt;Town&lt;/label&gt;
              &lt;input type="text" class="form-control" id="town" required&gt;
              &lt;div class="invalid-feedback"&gt;
                Town is required.
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4 mb-3"&gt;
              &lt;label for="county"&gt;County&lt;/label&gt;
              &lt;input type="text" class="form-control" id="county" required&gt;
              &lt;div class="invalid-feedback"&gt;
                County is required.
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4 mb-3"&gt;
              &lt;label for="postcode"&gt;Post Code&lt;/label&gt;
              &lt;input type="text" class="form-control" id="postcode" placeholder="" required&gt;
              &lt;div class="invalid-feedback"&gt;
                Post Code is required.
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;hr class="mb-4"&gt;
          &lt;input type="button" name="password" class="next btn btn-primary" value="Next" /&gt;
  &lt;/fieldset&gt;
  &lt;fieldset&gt;
        &lt;h4 class="mb-3"&gt;Description&lt;/h4&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12 mb-3"&gt;
                  &lt;label for="localAuthority"&gt;Description &lt;/label&gt;
                  &lt;textarea maxlength="100" class="form-control" id="localAuthoirty"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
  
      &lt;input type="button" name="step3" class=" btn btn-default" value="Step 3" /&gt;
      &lt;input type="button" name="step4" class=" btn btn-primary" value="Step 4" /&gt;
  
          &lt;/div&gt;
      &lt;hr class="mb-4"&gt;
      &lt;input type="button" name="previous" class="previous btn btn-default" value="Previous" /&gt;
      &lt;input type="button" name="next" class="next btn btn-primary" value="Next" /&gt;
  &lt;/fieldset&gt;
  
      &lt;fieldset id="step3"&gt;
      &lt;h4 class="mb-3"&gt;Step 3&lt;/h4&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12 mb-3"&gt;
  
              This is step 3
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;hr class="mb-4"&gt;
      &lt;input type="button" name="previous" class="previous btn btn-default" value="Previous" /&gt;
      &lt;input type="button" name="next" class="next btn btn-primary" value="Next" /&gt;
  &lt;/fieldset&gt;
  
  &lt;fieldset id="step4"&gt;
      &lt;h4 class="mb-3"&gt;Step 4&lt;/h4&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12 mb-3"&gt;
  
              This is step 4
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;hr class="mb-4"&gt;
      &lt;input type="button" name="previous" class="previous btn btn-default" value="Previous" /&gt;
      &lt;input type="button" name="next" class="next btn btn-primary" value="Next" /&gt;
  &lt;/fieldset&gt;
  
  &lt;fieldset id="terms"&gt;
      &lt;h4 class="mb-3"&gt;Final Step of the form&lt;/h4&gt;
      &lt;p&gt;All routes lead to this final step&lt;/p&gt;
  &lt;/fieldset&gt;
  
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function(){
  var current = 1,current_step,next_step,steps;
    steps = $("fieldset").length;
    //$(".next").click(function(){
      $(document).on("click",".next",function(){
      current_step = $(this).parent("fieldset");
      next_step = $(this).parent("fieldset").next();
      next_step.show();
      current_step.hide();
      //setProgressBar(++current);
    });
    //$(".previous").click(function(){
      $(document).on("click",".previous",function(){
      current_step = $(this).parent("fieldset");
      next_step = $(this).parent("fieldset").prev();
      next_step.show();
      current_step.hide();
      //setProgressBar(--current);
    });
  </code></pre>
  
  <p>I will continue to try and figure this out myself but any advice would be appreciated.</p>
  
  <p>My apologies if I haven't explained it well. My brain is frazzled from this!</p>
  
  <p>Many thanks</p>