Issue with fadeIn/fadeOut/hide/show JQuery

Context: I am using MDL Framework, I am trying to create a form system, where users input one bit of data, then that page fades out and the next page fades in. This works well for the first and the second. The button presses work fine (the console outputs the information requested etc.) and the counters will increase. The panel just won't appear or disappear as they are supposed to.

$(".btnSubmit").click(function() {
  $("#" + card).hide();
  $("#apptBack").hide();
  $("#cardBack").show();
  // $("#3").show(); // #3 used instead of # + card to test if card variable was the issue. This is the only space (when uncommented) that this card appears.
  
  if (card != 3) {
    if (card == 0) { //Needs different checking (check all boxes are ticked to continue) Old code, but too much like effort to take out
      var cont = true;
      $(".check").each(function() {
        if (this.checked) {

        } else {
          cont = false;
        }
      });
      if (cont == false) { //All boxes aren't ticked
        console.log("AHHHH");
        $("#failed").fadeIn();
        $("#emergBack").show();
      } else {
        card++ //They all are so next card
        //Get Clipboard group and then who to see
        // $(".btnSubmit").attr('disabled', 'true'); // This has been enabled to prevent further clicking - disabled currently for testing.
        $(".cardBack").show();
      }
    } else //Card isn't 1 so it can be a standard method
      if (card == 1) { //For first card
        see = $("#see").find(":selected").text();
        seeID = $("#see").find(":selected").attr('id');
        console.log(see);
        console.log(seeID);

        console.log("Chosen: " + seeID);
        if (!see) { //No value
          console.log("Nope");
          //Fade in current card (as a reject sort of way) or next if the card number has advanced
        } else { //Value, next card!
          card++;
          //Get Types before next card
          getTypes(); //getTypes contains a $("#" + card).show at the end. (This seems to work)
        }
      }
    else if (card == 2) { //Card 2
      type = $("#type").find(":selected").text();
      console.info(type);
      if (!type) { //No Value
        console.log("Nope");
        $("#" + card).fadeIn();
        //Fade in current card (as a reject sort of way) or next if the card number has advanced
      } else { //Value so next card
        card++;
        //$("#3").show(); // Doesn't seem to work when placed here?
        console.log(card);
        getDesc(); // This calls a function that pretty much just contains $("#3").show();
        // Used just to see if it's the fact that the other two .show/fadeIn when in their own function. - This doesn't make it appear either.
      }
    }

  } else { //Cards 1 and 2 have been checked. Now we can check the desc and if all good, move on to appt finding
    //	$("#"+ card).hide();
    //	$("#3").hide(); // This doesn't actually make  the card hidden when it's uncommented.
    desc = $("#desc").val(); //Get the last card's content (the description)

    if (desc == "") { //If empty
      console.log("Nope");
      $("#" + 3).fadeIn();
      //Fade it back in to show reject
    } else { //Has content!
      //Hide what's left, show the calendar
      console.log(desc);
      //	$("#3").hide(); // same issue here.
      $("#price").hide();
      $("#cal").fadeIn(); // This does work though, but #3 will not hide.
      // $("#showCal").fadeIn();
      console.log("Who? " + see + " Type? " + type + " Desc? " + desc);
      getTimeslots();
      $(".cardBack").hide();
    }
  }
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <p>Hello World</p>
  <button>Change color</button>
</div>

https://jsfiddle.net/xpvt214o/826602/

Is there a known issue with fadeIn/Out/Hide/Show or is my logic wrong somewhere?

Solution

I'm not entirely certain of the problem still, I'm not sure if it was the naming convention or an issue with .hide .show, either way;

function hide3() {
var x = document.getElementById("3c");
if (x.style.display === "none") {
    x.style.display = "block";
} else {
    x.style.display = "none";
}
}

I used this to fix it, as well as changing the name of the div which is a little annoying as it means I then had to manually address it opposed to having $("#"+ x); .