title: Filtering html table (JS)
body: <p>I have an html table in my view that I want to filter with multiple filters. In this case, I have 3 filters, but I can have much more.</p>
  
  <p>Here is a little part of the code, to show the problem</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>$(document).ready(function () {
     
     
  
      $('#datefilterfrom').on("change", filterRows);
      $('#datefilterto').on("change", filterRows);
      $('#projectfilter').on("change", filterProject);
  });
  
  function filterRows() {
      var from = $('#datefilterfrom').val();
      var to = $('#datefilterto').val();
  
      if (!from &amp;&amp; !to) { // no value for from and to
          return;
      }
  
      from = from || '1970-01-01'; // default from to a old date if it is not set
      to = to || '2999-12-31';
  
      var dateFrom = moment(from);
      var dateTo = moment(to);
  
      $('#testTable tr').each(function (i, tr) {
          var val = $(tr).find("td:nth-child(2)").text();
          var dateVal = moment(val, "DD/MM/YYYY");
          var visible = (dateVal.isBetween(dateFrom, dateTo, null, [])) ? "" : "none"; // [] for inclusive
          $(tr).css('display', visible);
      });
  }
  function filterProject() {
      var contentToColor = {
          "Заявка отменена": "#9900ff",
          "Подтверждено менеджером Vchasno": "green",
          "Отменено менеджером Vchasno": "#9900ff",
          "Отклонено региональным менеджером": "#9900ff",
          "Подтверждено региональным менеджером": "red"
      };
      var project = this.value;
      var filter, table, tr, td, i;
      filter = project.toUpperCase();
      table = document.getElementById("testTable");
      tr = table.getElementsByTagName("tr");
      for (i = 0; i &lt; tr.length; i++) {
          td = tr[i].getElementsByTagName("td")[2];
          if (td) {
              if (td.innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
                  tr[i].style.display = "";
              } else {
                  tr[i].style.display = "none";
              }
          }
  
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"&gt;&lt;/script&gt;
  &lt;div class="row"&gt;
          &lt;div class="col-md-3"&gt;
              &lt;h4&gt;Дата з&lt;/h4&gt;
              &lt;input type="date" class="form-control" id="datefilterfrom" data-date-split-input="true"&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3"&gt;
              &lt;h4&gt;Дата до&lt;/h4&gt;
              &lt;input type="date"  class="form-control" id="datefilterto" data-date-split-input="true"&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
              &lt;h4&gt;Проект&lt;/h4&gt;
             &lt;select id="projectfilter" name="projectfilter" class="form-control"&gt;&lt;option value="1"&gt;Тестовый проект&lt;/option&gt;&lt;option value="2"&gt;Тест2&lt;/option&gt;&lt;/select&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;table id="testTable" class="table"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th scope="col"&gt;#&lt;/th&gt;
                      &lt;th scope="col"&gt;Дата&lt;/th&gt;
                      &lt;th scope="col"&gt;Проект&lt;/th&gt;
                     
                 
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody id="report"&gt;
                &lt;tr&gt;
                  &lt;td class="proposalId"&gt;9&lt;/td&gt;&lt;td&gt; 17/07/2018&lt;/td&gt; &lt;td&gt; Тестовый проект&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;&lt;td class="proposalId"&gt;8&lt;/td&gt;&lt;td&gt; 18/07/2018&lt;/td&gt;&lt;td&gt; Тестовый проект&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td class="proposalId"&gt;7&lt;/td&gt;&lt;td&gt; 17/07/2018&lt;/td&gt;&lt;td&gt; Тест2&lt;/td&gt;&lt;/tr&gt;
                &lt;tr style=""&gt;&lt;td class="proposalId"&gt;3&lt;/td&gt;&lt;td&gt; 19/07/2018&lt;/td&gt;&lt;td&gt; Тест2&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
          &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the full working snippet </p>
  
  <blockquote>
    <p><a href="https://codepen.io/suhomlineugene/pen/JBBGXa" rel="nofollow noreferrer">https://codepen.io/suhomlineugene/pen/JBBGXa</a></p>
  </blockquote>
  
  <p>When I set date filter it filters table great, but when I set the second filter it gets data from the table that I have unfiltered.
  Where is my problem?</p>
  
  <p>Thank's for help!</p>