title: select group background color labels
body: <p>I am building a dynamic form to order products and have styled the radio buttons. I haven't added all the CSS, but enough to see the issue I'm having. I have some javascript to add a class when the radio button is selected, however it's not working correctly. I would like it to work so when you select one of the options in group 1, the button turns green and stays green... then when you select the option in group 2, that button then turns green for the selected also.</p>
  
  <p>I will be adding several options (radio groups) and need to update the javascript so that each group has a radio button selected that stays green, but I don't know much about javascript.</p>
  
  <p>Maybe some type of array for each label?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('label').click(function () {
       $('label').removeClass('btn-primary3');
       $(this).addClass('btn-primary3');
   });
  
  $('input:checked').parent().addClass('btn-primary3');</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>li.button-list {width:100%; margin:0px 0px 35px -20px; list-style:none; font-size:16px !important; position:relative; text-align:center;}
  .checked{display:none;}
  input.noradio {visibility: hidden;margin-left:-10px; }
  label.btn-primary2 {background-color:#333; border-color:#333;font-size:16px !important; color:#fff; padding:10px;}
  label.btn-primary3 {background-color:#008902 !important; border-color:#008902 !important;font-size:16px !important;}
  label.btn-primary2:hover {background-color:#008902 !important; border-color:#008902 !important;}
  label.btn-primary2:focus {background-color:#008902 !important; border-color:#008902 !important;}
  label.btn-primary3:hover {background-color:#008902 !important; border-color:#008902 !important;}
  label.btn-primary3:focus {background-color:#008902 !important; border-color:#008902 !important;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;h3 style="text-align:center;"&gt;First Radio Group&lt;/h3&gt;
  &lt;ul class="btn-group"  id="input_14_20"&gt;
  
  &lt;li class="gchoice_14_20_0 button-list" &gt;
  &lt;label class="wbc-button button btn btn-primary btn-primary2 active" for="choice_14_20_0" id="label_14_20_0"&gt;
  &lt;input type="radio" name="input_20"  class="noradio" id="choice_14_20_0" tabindex="1" onclick="gf_apply_rules(14,[0,92,99]);" onkeypress="gf_apply_rules(14,[0,92,99]);" autocomplete="off" checked="checked" value="Standard Floor Plan (King-Size Bed)|49900"&gt;
  &lt;i class="fa fa-check checked" style="margin-left:-15px;"&gt;&lt;/i&gt; &lt;i class="fa fa-times unchecked" style="margin-left:-15px;"&gt;&lt;/i&gt; Option 1&lt;/label&gt;
  &lt;/li&gt;
  
  
  &lt;li class="gchoice_14_20_1 button-list"&gt;
  &lt;label class="wbc-button button btn btn-primary btn-primary2"&gt; 
  &lt;input type="radio" name="input_20" class="noradio" id="choice_14_20_1" tabindex="2" value="Twin Bed Floor Plan|49900" onclick="gf_apply_rules(14,[0,92,99]);" onkeypress="gf_apply_rules(14,[0,92,99]);" autocomplete="off"&gt;&lt;i class="fa fa-check checked" style="margin-left:-15px;"&gt;&lt;/i&gt; &lt;i class="fa fa-times unchecked" style="margin-left:-15px;"&gt;&lt;/i&gt; Option 2&lt;/label&gt;
  &lt;/li&gt;
  
  &lt;/ul&gt;
    
    &lt;h3 style="text-align:center;"&gt;Second Radio Group&lt;/h3&gt;
    
   &lt;ul class="btn-group2" id="input_14_24"&gt;
  
  &lt;li class="gchoice_14_24_0 button-list"&gt;
  &lt;label name="countertops" class="wbc-button button btn btn-primary btn-primary2 active" for="choice_14_24_0" id="label_14_24_0"&gt;
  &lt;input type="radio" name="input_24"  class="noradio" id="choice_14_24_0" tabindex="3" autocomplete="off" onclick="changeImage(0) gf_apply_rules(14,[0,101]);" onkeypress="gf_apply_rules(14,[0,101]);" checked="checked" value="Standard Countertops|0"&gt;
  &lt;i class="fa fa-check checked" style="margin-left:-15px;"&gt;&lt;/i&gt; &lt;i class="fa fa-times unchecked" style="margin-left:-15px;"&gt;&lt;/i&gt; Option 1&lt;/label&gt;
  &lt;/li&gt;
  
  &lt;li class="gchoice_14_24_1 button-list"&gt;
  &lt;label name="countertops" class="wbc-button button btn btn-primary btn-primary2" for="choice_14_24_1" id="label_14_24_1"&gt; 
  &lt;input type="radio" name="input_24" class="noradio" id="choice_14_24_1" tabindex="4" onclick="changeImage(1) gf_apply_rules(14,[0,101]);" onkeypress="gf_apply_rules(14,[0,101]);" value="Fiber-Granite Countertops|1800" autocomplete="off"&gt;&lt;i class="fa fa-check checked" style="margin-left:-15px;"&gt;&lt;/i&gt; &lt;i class="fa fa-times unchecked" style="margin-left:-15px;"&gt;&lt;/i&gt; Option 2&lt;/label&gt;
  &lt;/li&gt;
  
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>