title: addClass and removeClass in Jquery on radio button select
body: <p>I have 2 different sets of radio buttons. But radio buttons are being displayed as an images. My question is on the select of picture (radio button), I would like other pictures to become hidden. So the way I thought is to add class to checked and than add another class to not checked. Base on the class on the not checked, i can hide those. </p>
  
  <p>My problem is because I have 2 sets of radio buttons one for size and one for reason, I want them to differentiate them.So when I select size, I don't want all reasons radio buttons to become hidden.</p>
  
  <p>So I can differentiate them separately and target them. </p>
  
  <p>If I add this line of code:</p>
  
  <pre><code>$('label:has(input:radio:checked)').addClass('activeReason');
  </code></pre>
  
  <p>It apply to all radio buttons <strong>which I don't want.</strong> </p>
  
  <p>Here is my radio buttons: <strong>Size</strong></p>
  
  <pre><code>    &lt;form id="sign-condition"&gt;
  
            &lt;label&gt;
              &lt;input type="radio" name="sign-condition"  class="sign-condition" value="new_sign" /&gt;
              &lt;img src="../../css/icons/new-signs.png"&gt;
            &lt;/label&gt;
  
            &lt;label&gt;
              &lt;input type="radio" name="sign-condition" class="sign-condition"  value="old_sign"/&gt;
              &lt;img src="../../css/icons/old-signs.png"&gt;
            &lt;/label&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>Here is my radio buttons: <strong>Reasons</strong></p>
  
  <pre><code>    &lt;div class="col-md-6"&gt;
  
                  &lt;form id="sign-reason"&gt;
  
                    &lt;label&gt;
                      &lt;input type="radio" name="sign-reason" value="damaged" /&gt;
                      &lt;img src="../../css/buttons/damaged.png"&gt;
                    &lt;/label&gt;
  
                    &lt;label&gt;
                      &lt;input type="radio" name="sign-reason" value="odd-size"/&gt;
                      &lt;img src="../../css/buttons/odd-size.png"&gt;
                    &lt;/label&gt;
  
                    &lt;label&gt;
                      &lt;input type="radio" name="sign-reason" value="not-correct-standard"/&gt;
                      &lt;img src="../../css/buttons/not-correct-standard.png"&gt;
                    &lt;/label&gt;
       &lt;/form
  </code></pre>
  
  <p>Here is JQuery which I tried to target each set differently. </p>
  
  <pre><code>  &lt;script&gt;
          $(document).ready(function(){ 
  
          $('input:radio').click(function() {
              $('label&gt;.sign-condition:has(input:radio:checked)').addClass('activeCondition');
              $('label&gt;.sign-condition:has(input:radio:checked)').removeClass('disable');
              $('label&gt;.sign-condition:has(input:radio:not(:checked))').removeClass('activeCondition');
              $('label&gt;.sign-condition:has(input:radio:not(:checked))').addClass('disable');
  
          });
  
  
  
          });
          &lt;/script&gt;
  </code></pre>
  
  <p><strong>How I can target each set of radio buttons differently. Thank you</strong></p>