jQuery set active class for button select
<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>