title: JavaScript AddEventListener not working for all containers
body: <p>I have a search bar that is pulling this information from an API and showing the information in a container. When I press the button I want to save the food ID right now I'm just printing it to the console. The code only prints the first button none of the other buttons work.</p>
  <pre><code>    function test(foodId){
    console.log(foodId);
  }
  
   function generateHTML(results){
     console.log(results);
    container.classList.remove('initial');
    let generatedHTML= '';
    results.map(result =&gt; {
      generatedHTML += `
        &lt;div class=&quot;item&quot;&gt;
          &lt;div class=&quot;flex-container&quot;&gt;
            &lt;h1 class=&quot;title&quot;&gt;${result.food.label}&lt;/h1&gt;
            &lt;button id=&quot;button&quot;  value=&quot;${result.food.foodId}&quot; class=&quot;btn btn-primary&quot;&gt;View&lt;/button&gt;
          &lt;/div&gt;
          &lt;p  id=&quot;Food&quot; value=&quot;${result.food.foodId}&quot; class=&quot;item-data&quot; &gt;${result.food.foodId}&lt;/p&gt;
          &lt;p class=&quot;item-data&quot;&gt;Brand: ${result.food.brand}&lt;/p&gt;
          &lt;p class=&quot;item-data&quot;&gt;Calories: ${result.food.nutrients.ENERC_KCAL.toFixed(2)}&lt;/p&gt;
          &lt;p class=&quot;item-data&quot;&gt;Fat: ${result.food.nutrients.FAT.toFixed(2)}&lt;/p&gt;
          &lt;p class=&quot;item-data&quot;&gt;Protein: ${result.food.nutrients.PROCNT.toFixed(2)}&lt;/p&gt;
        &lt;/div&gt;
      `
    })
    
    searchResultDiv.innerHTML = generatedHTML;
      document.getElementById(&quot;button&quot;).addEventListener(&quot;click&quot;,function(){
      test(document.getElementById(&quot;Food&quot;).innerText);
       
    });  
  }
  </code></pre>
  <p>What I get now
  <a href="https://i.stack.imgur.com/uOzMB.png" rel="nofollow noreferrer">results</a></p>