title: Updating an element after it has already been dynamically created in the DOM
body: <p>I create an li tag and append it to the dom and in the li tag I dynamically create the ID and innerHTMl. After this, I execute a setInterval() function expecting it to retrieve the ID of the dynamically created element and update its price in the DOM.</p>
  <p>Why is the setInterval not recognizing the created li tag's id even though it executes every second?</p>
  <pre><code>$(function() {
  
  companies = [
        {
            name : 'Apple'
          , symbol : 'AAPL'
          , price : '577'
          , shares : '1'
        }]
  
    for (var key in companies) {
  
        var obj = companies[key];
        
        for (var prop in obj) {
        if (prop === 'symbol') {
          symbol = obj[prop]; 
        }
        }
        
        
        const prodEl = document.createElement('div');
        
            prodEl.innerHTML = 
            `
          &lt;li class=&quot;stocks&quot;&gt;  
          &lt;div class='shares-price'&gt;&lt;p id=&quot;${symbol}-price&quot;&gt;Price: ${obj['price']}&lt;/p&gt;
          &lt;/li&gt;
          `;
  
      document.getElementById('stock-list').appendChild(prodEl);
  
      setInterval(function() {
  
        for (var key in companies) {
          var obj = companies[key];
  
          var symbol = '';
  
          for (var prop in obj) {
  
  
            if (prop === 'price') {
  
                symbol = obj[prop]
  
              var stockId = symbol + '-' + 'price';
              
              stockId = JSON.stringify(stockId);
                      document.getElementById(stockId).innerHTML = 200;
            }
          }
        }
        
      }, 1000 /* every second */ );
  
  
  
  });
  </code></pre>