title: Intercept click event on the element that is removed from the DOM with JavaScript
body: <p>I have a little weird situation. I need to perform a click event (intercept), here is my case. By default element (div) are removed from the DOM, that means that div only appears when the user clicks the button, below is an image of that button</p>
  <p><a href="https://i.stack.imgur.com/EP7Xc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EP7Xc.png" alt="enter image description here" /></a></p>
  <p>When the user clicks the button, content appears, image below:</p>
  <p><a href="https://i.stack.imgur.com/b8hCr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b8hCr.png" alt="enter image description here" /></a></p>
  <p><strong>What am trying to achieve?</strong></p>
  <p>Am trying to achieve this, when users click the button I want to add style to one div that appears, I simulate that on the image below:</p>
  <p><a href="https://i.stack.imgur.com/xIWag.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xIWag.png" alt="enter image description here" /></a></p>
  <p>So far my code looks like this:</p>
  <pre><code>var buttons = document.querySelectorAll('button.h5p-image-hotspot');
    for (var i = 0; i &lt; buttons.length; i++) {
        buttons[i].addEventListener('click', function(){
          var myNodelist = document.querySelectorAll('.h5p-image')
          var i;
          for (i = 0; i &lt; myNodelist.length; i++) {
            myNodelist[i].style.width = &quot;300px&quot;;
          }
        });
    }
  </code></pre>
  <p>But this doesn't work, can anybody try to help me with this?</p>