title: Toggle Yes / NO with multiple questions
body: <p>I have 5 questions in a form, and a few of them have a YES / NO response. I wanted to just be able to toggle the yes and no buttons once the user selected one of them. The issue I am running into is if one of the question is answered, and I answer the next question, it removes the answer from all other questions. I'm sure there is something simple I am missing.</p>
  
  <p><strong>* Update *</strong></p>
  
  <p>I got everything working the way I wanted to, thank you all for the help. One thing I have noticed now, the questions with the sub question, when I select the yes or no, the sub question display, but if I click anywhere on the screen, it removes the active class from the question.</p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div class="col-xs-12 col-md-6 col-md-offset-2 study-question" id="q-2"&gt;
                  &lt;p&gt;&lt;strong&gt;2.&lt;/strong&gt; HAVE YOU HAD SHINGLES?&lt;/p&gt;
                  &lt;input name="radio" type='hidden' value="Yes"/&gt;
                  &lt;div class="btn-group btn-toggle"&gt;
                      &lt;button type="button" class="btn btn-default yes-no btn-1" data-radio-name="radio"&gt;Yes&lt;/button&gt;
                      &lt;button type="button" class="btn btn-default yes-no" data-radio-name="radio"&gt;No&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
             &lt;div class="col-xs-12 col-md-6 col-md-offset-2 study-question" id="q-3"&gt;
                  &lt;p&gt;&lt;strong&gt;3.&lt;/strong&gt; HAVE YOU HAD PAIN IN THE AREA OF THE SHINGLES RASH FOR AT LEAST THE LAST 3 MONTHS?&lt;/p&gt;
                  &lt;input name="radio" type='hidden' value="Yes"/&gt;
                  &lt;div class="btn-group" data-toggle="buttons"&gt;
                      &lt;button type="button" class="btn btn-default yes-no" data-radio-name="radio" value="yes"&gt;Yes&lt;/button&gt;
                      &lt;button type="button" class="btn btn-default yes-no" data-radio-name="radio" value="no"&gt;No&lt;/button&gt;
  
                      &lt;div class="row"&gt;
                          &lt;div class="col-xs-12 col-md-6 col-md-offset-2 study-question sub-question"&gt;
                              &lt;p&gt;&lt;strong&gt;3A.&lt;/strong&gt; IF IT HAS NOT YET BEEN 3 MONTHS, HOW LONG WOULD YOU ESTIMATE THIS PAIN HAS BEEN ONGOING?&lt;/p&gt;
                              &lt;input name="radio" type='hidden' value="Yes"/&gt;
                              &lt;input type="email" class="form-control study-form-control" id="how-many-year" placeholder="How long?"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>    $('.yes-no').click(function(){
      $(this).closest('div').find('.yes-no').each(function(){
          $(this).removeClass('active');
      });
  
      $(this).addClass('active');
  
  
      $(this).val()=='yes'?$(this).closest('div').find('.sub-question').show():$(this).closest('div').find('.sub-question').hide();
  
  });
  </code></pre>
  
  <hr>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="col-xs-12 col-md-6 col-md-offset-2 study-question"&gt;
    &lt;p&gt;&lt;strong&gt;4.&lt;/strong&gt; DO YOU HAVE ANY OTHER CHRONIC  PAIN THAT IS NOT ASSOCIATED WITH YOUR SHINGLES PAIN?&lt;/p&gt;
    &lt;input name="radio" type='hidden' value="Yes"/&gt;
    &lt;div class="btn-group" data-toggle="buttons"&gt;
      &lt;button type="button" class="btn btn-default yes-no" data-radio-name="radio"&gt;Yes&lt;/button&gt;
      &lt;button type="button" class="btn btn-default yes-no" data-radio-name="radio"&gt;No&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="col-xs-12 col-md-6 col-md-offset-2"&gt;
    &lt;p&gt;&lt;strong&gt;5.&lt;/strong&gt; ARE YOU (CURRENTLY) TAKING MEDICINE TO MANAGE THE PAIN FROM SHINGLES?&lt;/p&gt;
    &lt;input name="radio" type='hidden' value="Yes"/&gt;
    &lt;div class="btn-group" data-toggle="buttons"&gt;
      &lt;button type="button" class="btn btn-default yes-no" data-radio-name="radio"&gt;Yes&lt;/button&gt;
      &lt;button type="button" class="btn btn-default yes-no" data-radio-name="radio"&gt;No&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('.btn-toggle').click(function() {
      $(this).toggleClass('active'); 
      console.log($(this));
  });
  </code></pre>
  
  <p>I just want it to target the current question that the user is trying to answer, not all of them at once.</p>