title: Hide and show a div based on search input with multiple tags
body: <p>I have been trying to search with multiple tags.</p>
  <p>But for some reason, it isn't working, it shows just the h5 tags as results.</p>
  <p>How would you change the code that it works?</p>
  <p>Is it because of the NodeList? For a single tag it is working with <code>Document.getElementsByTagName()</code></p>
  <p>Can i convert a NodeList to a HTMLCollection?</p>
  <pre><code>const searchBar = document.forms['search-webinare'].querySelector('input');
  searchBar.addEventListener('keyup', function(e) {
    const term = e.target.value.toLocaleLowerCase();
    const webinare = Array.prototype.slice.call(document.querySelectorAll('h3,h5'), 0);
    var hasResults = false;
    webinare.forEach(function(webinar) {
      const title = webinar.textContent;
      if (title.toLowerCase().indexOf(term) != -1) {
        webinar.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.style.display = 'flex';
        hasResults = true;
      } else {
        webinar.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.style.display = 'none';
      }
    });
  });
  </code></pre>
  <pre><code>&lt;form id=&quot;search-webinare&quot;&gt;
    &lt;input type=&quot;text&quot; placeholder=&quot;Suchen Sie ein Webinar ... &quot;/&gt;
  &lt;/form&gt;
  &lt;div&gt;
   &lt;div&gt;
    &lt;div&gt;
     &lt;div&gt;
      &lt;div&gt;
       &lt;div&gt;
        &lt;h3&gt;text1&lt;/h3&gt;
        &lt;h5&gt;text2&lt;/h5&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
   &lt;div&gt;
    &lt;div&gt;
     &lt;div&gt;
      &lt;div&gt;
       &lt;div&gt;
        &lt;h3&gt;text3&lt;/h3&gt;
        &lt;h5&gt;text4&lt;/h5&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
   &lt;div&gt;
    &lt;div&gt;
     &lt;div&gt;
      &lt;div&gt;
       &lt;div&gt;
        &lt;h3&gt;text5&lt;/h3&gt;
        &lt;h5&gt;text6&lt;/h5&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>