title: Accessing HTML Element after Adding with innerHtml
body: <p>I am adding the data received as a result of a request to my page as follows.</p>
  <pre><code>showMovieInfo(movies) {
      this.tableDiv.innerHTML = &quot;&quot;;
  
      movies.forEach(movie =&gt; {
          this.tableDiv.innerHTML += 
          `
          &lt;table class=&quot;table align-middle mb-0 bg-white&quot;&gt;
          &lt;thead class=&quot;bg-light&quot;&gt;
              &lt;tr&gt;
                  &lt;th&gt;Movie Name&lt;/th&gt;
                  &lt;th&gt;Position&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;div class=&quot;d-flex align-items-center&quot;&gt;
                          &lt;img src=&quot;${movie.image}&quot;
                              alt=&quot;&quot; style=&quot;width: 120px; height: 120px&quot; class=&quot;rounded-circle&quot; /&gt;
                          &lt;div class=&quot;ms-3&quot;&gt;
                              &lt;p class=&quot;fw-bold mb-1&quot;&gt;${movie.title}&lt;/p&gt;
                              &lt;p class=&quot;text-muted mb-0&quot;&gt;${movie.description}&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
  
                  &lt;td&gt;
                      &lt;button  type=&quot;button&quot; id=&quot;showonmap&quot; class=&quot;btn btn-link btn-sm btn-rounded&quot;&gt;
                          Show on map
                      &lt;/button&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
          &lt;/table&gt;`
  
      });
  }
  </code></pre>
  <p>then i want to add addEventListener to buttons with id=&quot;showonmap&quot;.But I am getting an error  and when I click the buttons, any function does not work.</p>