Reveal div based on checked radio/checkbox, multiple instances

I have to add the class 'revealed' to a div, once the radio button with the label 'yes' has been selected. So far I have my code set up so that I apply a 'required' class to the input that will be revealed, but I need to have a way to add the class 'revealed' to the 'reveal-if-active' div. This entire HTML structure will repeat as there will be multiple yes/no questions after this first one. So each 'reveal-if-active' div must be unique.

Here's the HTML structure that I am required to use:

<div class="form-group two-column">
  <input id="a1" type="radio" name="ayesno" value="1">
  <label for="a1">yes</label>
</div>
<div class="form-group two-column">
  <input id="a2" type="radio" name="ayesno" value="2">
  <label for="a2">no</label>
</div>
<div class="reveal-if-active">
  <label for="how-many-people">If <strong>yes</strong> how many people?</label>
  <input type="text" name="a-how-many-people" class="require-if-active" data-require-pair="#a1" required="">
</div>

Here's the JS I have so far:

var FormStuff = {

  init: function() {
    this.applyConditionalRequired();
    this.bindUIActions();
  },

  bindUIActions: function() {
    $("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
  },

  applyConditionalRequired: function() {

    $(".require-if-active").each(function() {
      var el = $(this);
      if ($(el.data("require-pair")).is(":checked")) {
        el.prop("required", true);
        $('[data-id=' + $('input:checked').prop('id') + ']').addClass('reveal'); 

      } else {
        el.prop("required", false);
        el.removeClass("revealed");
      }
    });

  }

};

FormStuff.init();