title: Toggle active class on a button but maintain state of other buttons
body: <p>I've read <a href="https://stackoverflow.com/questions/43169424/javascript-jquery-toggle-active-class-between-2-buttons-on-a-button-group">Javascript / JQuery Toggle Active Class between 2 buttons on a button group</a>. However I have a situation where I want to toggle the active class on a button being clicked, but maintain the state of the other buttons.</p>
  
  <p>For example:</p>
  
  <pre><code> &lt;!-- Button 1 --&gt;
   &lt;input type="button" name="btn1" class="filter-btn active"&gt;
  
   &lt;!-- Button 2 --&gt;
   &lt;input type="button" name="btn2" class="filter-btn"&gt;
  
   &lt;!-- Button 3 --&gt;
   &lt;input type="button" name="btn3" class="filter-btn active"&gt;
  
   &lt;!-- Button 4 --&gt;
   &lt;input type="button" name="btn4" class="filter-btn"&gt;
  </code></pre>
  
  <p>Button 1 and Button 3 have an <code>active</code> class.</p>
  
  <p>If I click Button 1, with the intention of toggling it to being inactive, I want to remove the <code>active</code> class on Button 1 <em>but keep the <code>active</code> class on Button 3</em>.</p>
  
  <p>I can't see how to do this because the following will remove the <code>active</code> class on all buttons, then re-apply it to Button 1 when clicked again:</p>
  
  <pre><code>$('.filter-btn').on('click', 'input', function() {
      $(this).addClass('active').siblings().removeClass('active');
  });
  </code></pre>
  
  <p>So the end result is that Button 1 has the <code>active</code> class removed, which is what I want. But Button 3 also has the <code>active</code> class removed, which I don't want.</p>
  
  <p>How is it possible to write this so it only toggles the class on the button clicked and leaves everything else as-is?</p>