How to show form step according to initial response (Jquery steps)

Question

I'm working with a form of the jquery step plugin and I'm trying to do something like this: I have a complete form and I want to show one step or another according to an initial response to a question.

The initial question is like this:

<div id="initial_question" style=" z-index: 10000;text-align: center; padding-top: 200px;position: fixed; top: 0%;left: 0%;right: 0%;bottom: 0%; background-color: rgba(178,139,8,1)">
            <div class="middle-box text-center animated fadeInDown">

                <h3 class="font-bold">¿question?</h3>

                <div >

                    <a id="yes"class="btn btn-primary m-t">yes</a>
                    <a id="not" class="btn btn-primary m-t">not</a>
                </div>
            </div>
        </div>

My form is like this:

    <form id="form"  enctype="multipart/form-data" method="POST" class="wizard-big">

     <h1>Applicant details</h1>
     <fieldset>
<!--.........-->
    </fieldset>
     <h1 class="option_no">Owner's data</h1>
     <fieldset class="option_no">
<!--.........-->
     </fielset>
</form>

I tried to make a script that deletes the elements of the step of the form that I do not want to show but I do not get it to work. The script is as follows:

<script>

        $(document).ready(function(){


            $( "#yes" ).click(function() {
            $("#initial_question").fadeOut("slow");
            });


            $( "#not" ).click(function() {

             $(".option_no").remove();

             $("#initial_question").fadeOut("slow");

            });
}
</script>

PS: I probably have typo errors for not putting the whole form, but in essence that's what I need to exemplify my problem.

Answer 1

Have you Looked at a switch / case statement?

switch (n) {
case label1: 
// code to execute if answer is yes;
break;

case label2:
// code to execute if answer is no;
break;
default:
echo "Please choose yes or no";
break;
}