Getting field to show based on value

I am having troubles getting my second for loop to work correctly. I am wanting the formFields to work independently of each other. If you run the snippet below, you will see that the first group works fine, but then when the second field displays, if you click "Yes", nothing happens and if you click no, that set of fields goes away. The second set of fields is controlling the first for some reason.

Based on the yes/no answer for the second group of fields, if yes, a new input should appear under that one.

Does anyone see what I am doing wrong?

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

for (const radio of radios) {
  radio.addEventListener('change', function() {
    radioCheck = document.querySelector('[name="yesno"]:checked').value;
    console.log(radioCheck);
    if (radioCheck == 'Yes') {
      $('#ansYes').fadeToggle(400);
    } else {
      $('#ansYes').fadeOut(400);
    }
  });
}
for (const radio2 of radios2) {
  radio2.addEventListener('change', function() {
    radioCheck2 = document.querySelector('[name="yesno2"]:checked').value;
    console.log(radioCheck2);
    if (radioCheck2 == 'Yes') {
      $('#ansYes2').fadeToggle(400);
    } else {
      $('#ansYes2').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, #ansYes2 {
        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?<span class="red"> *</span></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">Will you be bringing any guests?</label>
  <input type="radio" value="Yes" class="radio" name="yesno2" id="yes2">
  <label class="radioAnswer" for="yes">Yes</label>
  <input type="radio" value="No" class="radio" name="yesno2" id="no2">
  <label class="radioAnswer" for="no">NO</label>
</div>
<div class="formField" id="ansYes2">
  <label class="label">What is your guest's name?</label>
  <input type="text" class="input" name="guest1" id="guest1">
</div>