title: jQuery set active class for button select
body: <p>I have some html stuffs like this,</p>
  
  <pre><code>&lt;div class="btn-group" role="group"&gt;
      &lt;button type="button" class="btn btn-default"&gt;Low Cost/Effeciency&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="btn-group" role="group"&gt;
      &lt;button type="button" class="btn btn-default"&gt;Average&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="btn-group" role="group"&gt;
      &lt;button type="button" class="btn btn-default"&gt;High Cost&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>From my above snippets, each <code>btn-group</code> contains one <code>button</code>. I want to add <code>active</code> class when <code>button</code> click and remove <code>active</code> class which is the button already set as <code>active</code>. It means like radio button selection.</p>
  
  <p>I tried like this in jQuery, but doesn't provide exact solutions. </p>
  
  <pre><code>$(document).on('click', '.btn-group button', function (e) {
      $(this).addClass('active').parent('.btn-group').find('button').removeClass('active');
  });
  </code></pre>
  
  <p>How can I achieve this?</p>