javascript - Toggle Yes / NO with multiple questions

Question

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.

* Update *

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.

HTML:

 <div class="col-xs-12 col-md-6 col-md-offset-2 study-question" id="q-2">
                <p><strong>2.</strong> HAVE YOU HAD SHINGLES?</p>
                <input name="radio" type='hidden' value="Yes"/>
                <div class="btn-group btn-toggle">
                    <button type="button" class="btn btn-default yes-no btn-1" data-radio-name="radio">Yes</button>
                    <button type="button" class="btn btn-default yes-no" data-radio-name="radio">No</button>
                </div>
            </div>

           <div class="col-xs-12 col-md-6 col-md-offset-2 study-question" id="q-3">
                <p><strong>3.</strong> HAVE YOU HAD PAIN IN THE AREA OF THE SHINGLES RASH FOR AT LEAST THE LAST 3 MONTHS?</p>
                <input name="radio" type='hidden' value="Yes"/>
                <div class="btn-group" data-toggle="buttons">
                    <button type="button" class="btn btn-default yes-no" data-radio-name="radio" value="yes">Yes</button>
                    <button type="button" class="btn btn-default yes-no" data-radio-name="radio" value="no">No</button>

                    <div class="row">
                        <div class="col-xs-12 col-md-6 col-md-offset-2 study-question sub-question">
                            <p><strong>3A.</strong> IF IT HAS NOT YET BEEN 3 MONTHS, HOW LONG WOULD YOU ESTIMATE THIS PAIN HAS BEEN ONGOING?</p>
                            <input name="radio" type='hidden' value="Yes"/>
                            <input type="email" class="form-control study-form-control" id="how-many-year" placeholder="How long?">
                        </div>
                    </div>
                </div>
            </div>

JS

    $('.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();

});

---

HTML

<div class="col-xs-12 col-md-6 col-md-offset-2 study-question">
  <p><strong>4.</strong> DO YOU HAVE ANY OTHER CHRONIC  PAIN THAT IS NOT ASSOCIATED WITH YOUR SHINGLES PAIN?</p>
  <input name="radio" type='hidden' value="Yes"/>
  <div class="btn-group" data-toggle="buttons">
    <button type="button" class="btn btn-default yes-no" data-radio-name="radio">Yes</button>
    <button type="button" class="btn btn-default yes-no" data-radio-name="radio">No</button>
  </div>
</div>

<div class="col-xs-12 col-md-6 col-md-offset-2">
  <p><strong>5.</strong> ARE YOU (CURRENTLY) TAKING MEDICINE TO MANAGE THE PAIN FROM SHINGLES?</p>
  <input name="radio" type='hidden' value="Yes"/>
  <div class="btn-group" data-toggle="buttons">
    <button type="button" class="btn btn-default yes-no" data-radio-name="radio">Yes</button>
    <button type="button" class="btn btn-default yes-no" data-radio-name="radio">No</button>
  </div>
</div>

JS

$('.btn-toggle').click(function() {
    $(this).toggleClass('active'); 
    console.log($(this));
});

I just want it to target the current question that the user is trying to answer, not all of them at once.

Answer 1

You can use .closest('div') to target the closest div of the element that triggered the .change() event and use .find() to target the class.

One function to to deal with all change events for elements with the class of MyToggle

This will allow you to run the same function for all questions as shown in the demo below.

Update: Yes/No toggle

Demo

$(".MyToggle").click(function() {
    $(this).val()=='yes'?$(this).closest('div').find('.Questions').show():$(this).closest('div').find('.Questions').hide();
});

.Questions{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    Yes<button class="MyToggle" value="yes">Yes</button> <button class="MyToggle"  value="no">No</button>
    <div class="Questions">Questions?</div>
</div>
<div>
    Yes<input type="radio" name="Q2" class="MyToggle" value="yes"/> No<input type="radio" name="Q2" class="MyToggle"  value="no"/>
    <div class="Questions">Questions?</div>
</div><div>
    Yes<input type="radio" name="Q3" class="MyToggle" value="yes"/> No<input type="radio" name="Q3" class="MyToggle"  value="no"/>
    <div class="Questions">Questions?</div>
</div>