title: Using multiple dropdowns to filter HTML table
body: <p>I have two dropdowns used to filter my HTML table which works fine however the filters do not work together.
  If I select Archive for example, the data is filtered correctly but when I select the other filter, it unfilters
  then filters just the other filter. How can I make both work together or a cleaner way to implement this? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    $('#archive').change(function() {
      if (this.value == "archived") {
        $("#filter")
          .find("tbody tr")
          .hide()
          .filter(function() {
            return $(this).children('td').eq(3).text().trim() !== '';
          }).show();
      } else if (this.value == "not-archived") {
  
        $("#filter").find("tbody tr").hide().filter(function() {
          return $(this).children('td').eq(3).text().trim() === '';
        }).show();
      } else {
        $("#filter").find("tbody tr").show();
      }
    });
  
    $('#type').change(function() {
      if (this.value == "bookers") {
        $("#filter")
          .find("tbody tr")
          .hide()
          .filter(function() {
            return $(this).children('td').eq(4).text().trim() === 'True';
          }).show();
      } else if (this.value == "basics") {
  
        $("#filter").find("tbody tr").hide().filter(function() {
          return $(this).children('td').eq(4).text().trim() === 'False';
        }).show();
      } else {
        $("#filter").find("tbody tr").show();
      }
    });
  
    // show bookers by default
    $("#filter")
      .find("tbody tr")
      .hide()
      .filter(function() {
        return $(this).children('td').eq(4).text().trim() === 'True';
      }).show();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;label for="type"&gt;Full Entry&lt;/label&gt;
  &lt;select id="type" name="type"&gt;
    &lt;option value="all"&gt;All&lt;/option&gt;
    &lt;option value="bookers" selected&gt;Bookers&lt;/option&gt;
    &lt;option value="basics"&gt;Basics&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;label for="archive"&gt;Filter Archive&lt;/label&gt;
  &lt;select id="archive" name="archive"&gt;
    &lt;option value="all"&gt;All&lt;/option&gt;
    &lt;option value="archived"&gt;Archived&lt;/option&gt;
    &lt;option value="not-archived"&gt;Not Archived&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;table class="table" style="width: 30%" id="filter"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Ref&lt;/th&gt;
        &lt;th&gt;Edit&lt;/th&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Archived&lt;/th&gt;
        &lt;th&gt;Type&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;th&gt;
        &lt;td&gt;a&lt;/td&gt;
        &lt;td&gt;b&lt;/td&gt;
        &lt;td&gt;c&lt;/td&gt;
        &lt;td&gt;03/04/12&lt;/td&gt;
        &lt;td&gt;True&lt;/td&gt;
      &lt;/th&gt;
      &lt;th&gt;
        &lt;td&gt;a&lt;/td&gt;
        &lt;td&gt;b&lt;/td&gt;
        &lt;td&gt;c&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;True&lt;/td&gt;
      &lt;/th&gt;
      &lt;th&gt;
        &lt;td&gt;a&lt;/td&gt;
        &lt;td&gt;b&lt;/td&gt;
        &lt;td&gt;c&lt;/td&gt;
        &lt;td&gt;10/10/12&lt;/td&gt;
        &lt;td&gt;False&lt;/td&gt;
      &lt;/th&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>