Switch Active Class Between Groups Of Include/exclude Buttons

I have an application which provides a list of filters. Each filter has an 'include' and 'exclude' button, for example: &l

Solution 1:

What I have done here is put each pair inside a div that has a class of .filterGroup. This means they are separated from the other groups.

Alongside this, I am then using the siblings() function in jQuery to check if a class is found and then remove it. You can see the text changes to red once it has the active class.

$("input").click(function() {
  var $this = $(this);

  $this.toggleClass("active");

  if ($this.siblings().hasClass("active")) {
    $this.siblings().removeClass("active")
  }
});

input.active {
  color: red;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="filterGroup"><inputtype="button"name="include_337"value="+"><inputtype="button"name="exclude_337"value="-"> Filter 1
</div><divclass="filterGroup"><inputtype="button"name="include_856"value="+"><inputtype="button"name="exclude_856"value="-"> Filter 2
</div>