title: Combining two filters when clicking two different sections of buttons
body: <p>I would like to combine two filters when clicking two different sections of buttons. Right now, when I click one button it removes the selection of the previous one. I have tried several functions but I have not been able to come with the right logic.</p>
  
  <p>I have written a schema of my current status. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!-- Buttons --&gt;
  
  &lt;p&gt; Language: &lt;button class="btn" data-category="en"&gt; EN &lt;/button&gt; &lt;button class="btn" data-category="it"&gt; IT &lt;/button&gt; &lt;/p&gt;
  &lt;p&gt; Stuff: &lt;button class="btn" data-category="a"&gt; A &lt;/button&gt; &lt;button class="btn" data-category="b"&gt; B &lt;/button&gt; &lt;button class="btn" data-category="c"&gt; C &lt;/button&gt; &lt;/p&gt;
  
  &lt;!-- Elements to select --&gt;
  
    &lt;div class="element en a"&gt;
      &lt;p&gt;en A&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="element en b"&gt;
      &lt;p&gt;en B&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="element it c"&gt;
      &lt;p&gt;it C&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="element it b"&gt;
      &lt;p&gt;it b&lt;/p&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>js / jQuery</p>
  
  <pre><code>$(".btn").click(function(e){
    e.preventDefault();
    var category = $(this).data("category")
    $('.element').hide();
    $('.element.'+category).fadeIn();
  })
  </code></pre>
  
  <p>It's also in <a href="https://jsfiddle.net/d39xv7cg/3/" rel="nofollow noreferrer">this fiddle</a>.</p>
  
  <p>Also, nice to haves:</p>
  
  <ul>
  <li>I would like to know how to color the button once it is selected.</li>
  <li>Add a reset button (which I guess would be easy adding "reset" in data-category.</li>
  </ul>
  
  <p>Thanks for the advice and the suggestions in advance!</p>