title: Filter is working but they overwrite each other
body: <p>I was searching in two column at a time, and it's not give me correct result.
  The problem is that they overwrite each other. I would appreciate any suggestions on how to apply second filter only to the results of the first one, not to the entire dataset.</p>
  
  <p>Thank you!
  This is the input types </p>
  
  <pre><code>&lt;input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"&gt;
  &lt;input type="text" id="myInput1" onkeyup="myFunction1()" placeholder="Search for country.." title="Type in a country"&gt;
  </code></pre>
  
  <p>And this is the script: </p>
  
  <pre><code>function myFunction1() {
      var input, filter, table, tr, td, i;
      input document.getElementById("myInput1") filter = input.value.toUpperCase();
      table = document.getElementById("myTable");
      tr = table.getElementsByTagName("tr");
      for (i = 0; i &lt; tr.length; i++) {
          td = tr[i].getElementsByTagName("td")[0];
          if (td) {
              if (td.innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
                  tr[i].style.display = "";
              } else {
                  tr[i].style.display = "none";
              }
          }
      }
  }
  
  function myFunction() {
      var input, filter, table, tr, td, i;
      input document.getElementById("myInput") filter = input.value.toUpperCase();
      table = document.getElementById("myTable");
      tr = table.getElementsByTagName("tr");
      for (i = 0; i &lt; tr.length; i++) {
          td = tr[i].getElementsByTagName("td")[1];
          if (td) {
              if (td.innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
                  tr[i].style.display = "";
              } else {
                  tr[i].style.display = "none";
              }
          }
      }
  }
  </code></pre>
  
  <p>Here is the link: <a href="https://onlinegdb.com/H153ldRYf" rel="nofollow noreferrer">https://onlinegdb.com/H153ldRYf</a> </p>