I've currently got quite a large form, which has a multiple-choice area and at the end will give you a link depending on your answers.
It seems to work until you go back to say Step 2 and choose a different subject, then the button doesn't reset, it just stays the same. Can anyone work out why this might be?
$(function() {
$('.age').on('change', function() {
//Age 8-10
if ($(this).val() === "8" || $(this).val() === "9" || $(this).val() === "10") {
$("#subject8-10").show();
$("#subject-overall").hide();
//Subject 8-10
$('.subject8-10').on('change', function() {
//Subject Overall
if ($(this).val() === "subject-fill") {
$("#location-overall").show();
$("#locations-ge-ss-8").hide();
//General English
} else if ($(this).val() === "general-english") {
//Locations
$("#locations-ge-ss-8").show();
$("#location-overall").hide();
$('.locations-ge-ss-8').on('change', function() {
if ($(this).val() === "location-fill") {
$("#button-overall").show()
$("#sbcox-ge").hide();
$("#sbcox-ss").hide();
} else if ($(this).val() === "sbc-oxford") {
$("#sbcox-ge").show();
$("#sbcox-ss").hide();
$("#button-overall").hide()
} else {
$("#sbcox-ge").hide();
$("#sbcox-ss").hide();
$("#button-overall").show()
}
});
//Summer Study
} else if ($(this).val() === "summer-study") {
//Locations
$("#locations-ge-ss-8").show();
$("#location-overall").hide();
$('.locations-ge-ss-8').on('change', function() {
if ($(this).val() === "location-fill") {
$("#button-overall").show()
$("#sbcox-ss").hide();
$("#sbcox-ge").hide();
} else if ($(this).val() === "sbc-oxford") {
$("#sbcox-ss").show();
$("#sbcox-ge").hide();
$("#button-overall").hide()
} else {
$("#sbcox-ss").hide();
$("#sbcox-ge").hide();
$("#button-overall").show()
}
});
} else {
$("#location-overall").show();
$("#button-overall").show()
}
});
//If 11 show the Subject 11 Field
} else if ($(this).val() === "11") {
$("#subject11").show();
$("#subject8-10").hide();
$("#subject-overall").hide();
$("#location-overall").show();
} else {
$("#subject8-10").hide();
$("#subject-overall").show();
}
});
});.inner-modal {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="decider-form"><div class="container"><div class="row"><div class="col-lg-3 col-md-3 col-sm-12"><select name="age" class="age"><option value="age-fill">1. Age</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option></select></div><!--End Columns--><!--Overall--><div class="col-lg-3 col-md-3 col-sm-12" id="subject-overall"><select name="subject"><option value="subject-fill">2. Subject</option></select></div><!--Subjects--><div class="col-lg-3 col-md-3 col-sm-12 inner-modal" id="subject8-10"><select name="subject" class="subject8-10"><option value="subject-fill">2. Subject</option><option value="general-english">
General English</option><option value="summer-study">
Summer Study</option></select></div><!--Overall--><div class="col-lg-3 col-md-3 col-sm-12" id="location-overall"><select name="location"><option value="location-fill">3. Location</option></select></div><!--Locations--><div class="col-lg-3 col-md-3 col-sm-12 inner-modal" id="locations-ge-ss-8"><select name="location" class="locations-ge-ss-8"><option value="location-fill">3. Location</option><option value="sbc-oxford">
SBC Oxford</option></select></div><!--Overall--><div class="col-lg-3 col-md-3 col-sm-12" id="button-overall"><div class="call-to-action disabled"><a class="call-action" href="#">See Your Course</a></div></div><!--Buttons--><div class="col-lg-3 col-md-3 col-sm-12 inner-modal" id="sbcox-ge"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See General English</a></div></div><div class="col-lg-3 col-md-3 col-sm-12 inner-modal" id="sbcox-ss"><div class="call-to-action"><a class="call-action" href="link" target="_blank">See Summer Study</a></div></div></div><!--End Row--></div><!--End Container--></div><!--End Decider Form-->