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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filterGroup">
  <input type="button" name="include_337" value="+">
  <input type="button" name="exclude_337" value="-"> Filter 1
</div>

<div class="filterGroup">
  <input type="button" name="include_856" value="+">
  <input type="button" name="exclude_856" value="-"> Filter 2
</div>