title: Toggle not working for DOM rendered HTML elements after reloading
body: <p>I'm making a weather app and I want to click a button to convert between imperial and metric. I also have a search bar and when I enter a location, a dropdown menu would appear and I can click on one of the items and the HTML page would reload with new info.</p>
  <p>Before clicking on any dropdown item (with initial values on the page), the toggle button works fine. But after I click on a dropdown item and the page reloads, the button works <strong>only</strong> for HTML elements that I wrote <strong>directly</strong> into the .html file. For the other elements that I wrote into HTML <strong>through DOM</strong>, it doesn't work.</p>
  <p>Relevant code below.</p>
  <pre><code>async function init (name) {
    await fetchCurrentData(name)
  
    const forecastHoursList =  await hoursList(name)
    document.querySelector('.forecast ul').innerHTML = renderHourlyForecast(forecastHoursList)
  
    const forecastDailyList =  await dailyList(name)
    document.querySelector('.future ul').innerHTML = renderDailyForecast(forecastDailyList)
  }
  
  
  // initial value
  await init('Miami')
  
  
  // toggle function below
  const button = document.querySelector('button')
  const hidden = document.querySelectorAll('span.hidden')
  const visible = document.querySelectorAll('span.toggle')
  
  button.addEventListener('click', event =&gt; {
    hidden.forEach(el =&gt; {
      el.classList.toggle('hidden')
      el.classList.toggle('toggle')
    })
    visible.forEach(el =&gt; {
      el.classList.toggle('hidden')
      el.classList.toggle('toggle')
    })
  
  
  //Render data into HTML elements
  const renderHourlyForecast = (forecastHoursList) =&gt; {
    const renderedForecastList = forecastHoursList.map((el) =&gt; {
      return `
      &lt;div&gt;
        &lt;li&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;h4&gt;${el[0]}&lt;/h4&gt;&lt;/li&gt;
            &lt;li&gt;&lt;img src=&quot;${el[1]}&quot;&gt;&lt;/li&gt;
            &lt;li&gt;&lt;span class=&quot;toggle&quot; style=&quot;float: left&quot;&gt;Temp °C&lt;/span&gt;&lt;span class=&quot;hidden&quot; style=&quot;float: left&quot;&gt;Temp °F&lt;/span&gt;&lt;h4 class=&quot;temp&quot;&gt;${el[2]}&lt;/h4&gt;&lt;/li&gt;
            &lt;li&gt;&lt;span class=&quot;toggle&quot; style=&quot;float: left&quot;&gt;Feels °C&lt;/span&gt;&lt;span class=&quot;hidden&quot; style=&quot;float: left&quot;&gt;Feels °F&lt;/span&gt;&lt;h4 class=&quot;temp&quot;&gt;${el[3]}&lt;/h4&gt;&lt;/li&gt;
            &lt;li&gt;&lt;span class=&quot;toggle&quot; style=&quot;float: left&quot;&gt;Wind kph&lt;/span&gt;&lt;span class=&quot;hidden&quot; style=&quot;float: left&quot;&gt;Wind mph&lt;/span&gt;&lt;h4 class=&quot;windspeed&quot;&gt;${el[4]}&lt;/h4&gt;&lt;/li&gt;
            &lt;li&gt;&lt;span style=&quot;float: left&quot;&gt;Cloud cover&lt;/span&gt;&lt;h4&gt;${el[5]}%&lt;/h4&gt;&lt;/li&gt;
            &lt;li&gt;&lt;span style=&quot;float: left&quot;&gt;Precip chance&lt;/span&gt;&lt;h4&gt;${el[6]}%&lt;/h4&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/div&gt;
      `
    }).join('')
    return renderedForecastList
  }
  
  
  //Searchbar input event below
  const onInput = async event =&gt; {
    const cityList = await autoComplete(event.target.value)
  
    if(!cityList.length) {
      dropdown.classList.remove('is-active');
      return
    }
  
    resultsWrapper.innerHTML = ''
    dropdown.classList.add('is-active');
  
    for(let list of cityList) {
      const option = document.createElement('a')
      option.classList.add('dropdown-item')
      option.innerHTML = renderOption(list)
  
      //Dropdown click event below
      option.addEventListener('click', async () =&gt; {
        dropdown.classList.remove('is-active');
        search.value = list[0];
        await init(list[0])
      });
  
    resultsWrapper.appendChild(option)
    }
  }
  </code></pre>