If statement running else when the condition should pass

Question

I am struggling finding out why my if-statement is failing the condition and running the else statement.

If the answer is 'yes', then an input box should appear under the first question. This isn't the case. If you select no it is showing. You can see in the snippet console that the value in the console is reading correctly.

What am I doing wrong?

var radioCheck = '';
	const radios = Array.from(document.querySelectorAll('[name="yesno"]'))

	for (const radio of radios) {
		radio.addEventListener('change', function() {
		radioCheck = document.querySelector('[name="yesno"]:checked').value;
		console.log(radioCheck);
	  })
	}
	var rsvpAns = $('.radio');
	rsvpAns.click(function() {
		if (radioCheck == 'Yes') {
			$('#ansYes').fadeToggle(400);
		} else {
			$('#ansYes').fadeOut(400);
		}
	});

.radio {
	display: none;
}
.radioAnswer {
	width: 220px;
	display: inline-block;
	vertical-align: top;
	background: #dbc8ca;
	cursor: pointer;
	padding: 15px 0;
	transition-duration: .4s;
	position: relative;
}
.radioAnswer::before {
	display: inline-block;
	content: "";
	border-width: 0 2px 2px 0;
	border-color: transparent;
	border-style: solid;
	width: 0;
	height: 0;
	transition: width .4s linear .1s, 
    height .2s linear 1.6s;
	position: absolute;
	left: 10px;
	top: 50%;
	transform: rotate(35deg) translateY(-50%);
	transform-origin: center right;
}
input[type=radio]:checked+.radioAnswer {
	background: #0a0;
	color: #fff;
}
input[type=radio]:checked+.radioAnswer::before {
	border-color: #fff;
	transform: rotate(35deg) translateY(-50%);
	height: 1.5em;
	width: .8em;
	transition: all .4s linear 0s, width .4s linear .1s, height .2s linear .3s;
	position: absolute;
}
.radioAnswer {
	font-family: 'Open Sans', sans-serif;
	font-size: .9rem;
	text-align: center;
}
#ansYes {
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="formField">
		<label class="label">Will you be attending?</label>
		<input type="radio" value="Yes" class="radio" name="yesno" id="yes">
		<label class="radioAnswer" for="yes">Yes</label>
		<input type="radio" value="No" class="radio" name="yesno" id="no">
		<label class="radioAnswer" for="no">NO</label>
</div>
<div class="formField" id="ansYes">
		<label class="label">How many guests will you be bringing?</label>
		<input type="number" class="input">
</div>

Answer 1

Why don't just show/hide the #ansYes in the change event handler? Notice I changed fadeToggle() with fadeIn().

const radios = Array.from(document.querySelectorAll('[name="yesno"]'))

for (const radio of radios) {
  radio.addEventListener('change', function() {
    radioCheck = document.querySelector('[name="yesno"]:checked').value;
    if (radioCheck == 'Yes') {
      $('#ansYes').fadeIn(400);
    } else {
      $('#ansYes').fadeOut(400);
    }
  })
}

.radio {
	display: none;
}
.radioAnswer {
	width: 220px;
	display: inline-block;
	vertical-align: top;
	background: #dbc8ca;
	cursor: pointer;
	padding: 15px 0;
	transition-duration: .4s;
	position: relative;
}
.radioAnswer::before {
	display: inline-block;
	content: "";
	border-width: 0 2px 2px 0;
	border-color: transparent;
	border-style: solid;
	width: 0;
	height: 0;
	transition: width .4s linear .1s, 
    height .2s linear 1.6s;
	position: absolute;
	left: 10px;
	top: 50%;
	transform: rotate(35deg) translateY(-50%);
	transform-origin: center right;
}
input[type=radio]:checked+.radioAnswer {
	background: #0a0;
	color: #fff;
}
input[type=radio]:checked+.radioAnswer::before {
	border-color: #fff;
	transform: rotate(35deg) translateY(-50%);
	height: 1.5em;
	width: .8em;
	transition: all .4s linear 0s, width .4s linear .1s, height .2s linear .3s;
	position: absolute;
}
.radioAnswer {
	font-family: 'Open Sans', sans-serif;
	font-size: .9rem;
	text-align: center;
}
#ansYes {
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="formField">
		<label class="label">Will you be attending?</label>
		<input type="radio" value="Yes" class="radio" name="yesno" id="yes">
		<label class="radioAnswer" for="yes">Yes</label>
		<input type="radio" value="No" class="radio" name="yesno" id="no">
		<label class="radioAnswer" for="no">NO</label>
</div>
<div class="formField" id="ansYes">
		<label class="label">How many guests will you be bringing?</label>
		<input type="number" class="input">
</div>