jquery - Switch active class between groups of include/exclude buttons

Question

I have an application which provides a list of filters.

Each filter has an "include" and "exclude" button, for example:

<input type="button" name="include_337" value="+"> 
<input type="button" name="exclude_337" value="-"> Filter 1

<input type="button" name="include_856" value="+"> 
<input type="button" name="exclude_856" value="-"> Filter 2

So this renders a + (for "include") and - (for "exclude") button with the filter name listed beside it. The name attribute of the buttons shows whether it is a button to include (include_) or exclude (exclude_) the filter, followed by an ID number that comes from a database.

When any of the buttons are clicked I place an active class on the button. I recently asked about how to toggle those buttons: Toggle active class on a button but maintain state of other buttons

However, I have a separate issue. If I click, for example, - on Filter 1 it will add the active class:

<input type="button" name="include_337" value="+"> 
<input type="button" name="exclude_337" class="active" value="-"> Filter 1

It should not be possible to have the active class on both the include and exclude button. However, I'm not sure how to do this. At the moment, it's possible to click the + on Filter 1 and both will get the active class:

<input type="button" name="include_337" class="active" value="+"> 
<input type="button" name="exclude_337" class="active" value="-"> Filter 1

What I want is effectively like radio buttons, where it's only possible to have either + or - active at any one time for a specific filter. However these must be button elements, not radio buttons, so I don't want to change the type attribute.

I've had a look at jQuery: Uncheck other checkbox on one checked but this is slightly different as it uses radio buttons and also unchecks all other checkboxes. In this case I want it to apply to groups of filters - i.e. changing Filter 1 should not affect Filter 2, etc. Is this possible?

Answer 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>