Stefdelec Stefdelec - 6 months ago 29
jQuery Question

How do i create 2 btn-group on same page?

I am using bootstrap. I am having 2 btn-group on same page. Each of them working fine but when I click on one it unselect (remove active class?) the other.
How can I keep the active class?

<div class="container">

<div id="focusarea" class="btn-group">
<button type="button" class="btn btn-outline btn-primary" data-territory="pays">Pays</button>
<button type="button" class="btn btn-outline btn-primary" data-territory="dept">D├ępartement</button>
<button type="button" class="btn btn-outline btn-primary" data-territory="ville">Ville</button>



</div>

</div>
<div class="container">

<div id="foc" class="btn-group">
<button type="button" class="btn btn-outline btn-primary" data-territory="pays">Pays</button>
<button type="button" class="btn btn-outline btn-primary" data-territory="dept">D├ępartement</button>
<button type="button" class="btn btn-outline btn-primary" data-territory="ville">Ville</button>



</div>

</div>

Answer
$("#foc .btn").click(function(){
$("#foc .btn").removeClass("active");
$(this).addClass("active");
});

$("#focusarea .btn").click(function(){
$("#focusarea .btn").removeClass("active");
$(this).addClass("active");
});