title: Can't read value of dynamically generated HTML objects
body: <p><code>Datos()</code> loads info converted to HTML objects into an HTML file with the <code>class</code> of each one already defined. I need  <code>save()</code>  to read the values of the <code>input</code>s generated but when I try to do it using <code>document.querySelector()</code> to find them by their class, it apparently returns <code>null</code> and gives me this error:</p>
  
  <blockquote>
    <p>infoPersonal.js:67 Uncaught TypeError: Cannot read property 'value' of null
        at HTMLSpanElement. (infoPersonal.js:67)</p>
  </blockquote>
  
  <p>Am I doing something wrong?</p>
  
  <p>(I would add a snippet code but it doesn't work because of some imports, I hope the javascript code is enough)</p>
  
  <pre class="lang-js prettyprint-override"><code>const datos = () =&gt; {
    const token = localStorage.getItem('token')
    if (token) {
      return fetch('https://janfa.gharsnull.now.sh/api/auth/me', {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
            authorization: token,
          },
        })
        .then(x =&gt; x.json())
        .then(user =&gt; {
            const datalist = document.querySelectorAll(".data")
            datalist.forEach(function(el) {
                var divInfo = document.createElement("div")
                divInfo.setAttribute("class", `divInfo-${el.getAttribute("data-target")}`)
                var divInput = document.createElement("div")
                divInput.setAttribute("class", `divInput-${el.getAttribute("data-target")}`)
                divInput.hidden = true
                var input
                var icon
  
                const template = '&lt;p&gt;' + user[el.getAttribute("data-target")] + '&lt;/p&gt;'
  
                input = document.createElement("input")
                input.type = "text"
                input.setAttribute("class", `input-${el.getAttribute("data-target")}`)
                input.value = user[el.getAttribute("data-target")]
  
                icon = document.createElement("span")
                icon.setAttribute("class", "flaticon-diskette")
                icon.setAttribute("data-target", `${el.getAttribute("data-target")}`)
                divInfo.innerHTML = template
                divInput.appendChild(input)
                divInput.appendChild(icon)
                el.appendChild(divInfo)
                el.appendChild(divInput)
              }
            })
        }).then(() =&gt; {
      save()
    })
  }
  }
  
  const save = () =&gt; {
    const saves = document.querySelectorAll(".flaticon-diskette")
    saves.forEach(function(save) {
      const input = document.querySelector(`.input-${save.getAttribute("data-target")}`)
      save.addEventListener('click', () =&gt; {
        console.log(input.value)
      })
    })
  }
  </code></pre>