title: Why is the wrong event being fired on button click?
body: <p>I have two Javascript files, one is a react wrapper, the other is raw Javascript/html that is loaded in the react wrapper because the Javascript/html is older code. In the Javascript/html code I try to attach event listeners to each button in a <code>&lt;ul&gt;</code>:</p>
  
  <pre><code>const previewItem = document.getElementsByClassName("previewItem");
          for (let i = 0; i &lt; previewItem.length; i += 1) {
              previewItem[i].addEventListener('click', function(e) {
                  var event = new Event('previewItem');
                  previewItem[i].dispatchEvent(event);
              });
          }
  </code></pre>
  
  <p>And then in the react wrapper I handle the event like this:</p>
  
  <pre><code>const handlePreviewItem = e =&gt; {
              this.showCompilationModal(
                  e.target.getAttribute('data-previewId'),
              );
          };
  
          const previewItem = document.getElementsByClassName('previewItem');
          for (let i = 0; i &lt; previewItem.length; i += 1) {
              previewItem[i].addEventListener('previewItem', handlePreviewItem);
          }
  </code></pre>
  
  <p>The problem occurs because onload the dom might look something like this:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;button data-previewId="1"&gt;&lt;/button&gt;&lt;/li&gt;
      &lt;li&gt;&lt;button data-previewId="2"&gt;&lt;/button&gt;&lt;/li&gt;
      &lt;li&gt;&lt;button data-previewId="3"&gt;&lt;/button&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;button data-previewId="4"&gt;&lt;/button&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and after dragging from one list to another it could look like this:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;button data-previewId="1"&gt;&lt;/button&gt;&lt;/li&gt;
      &lt;li&gt;&lt;button data-previewId="2"&gt;&lt;/button&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;button data-previewId="3"&gt;&lt;/button&gt;&lt;/li&gt;
      &lt;li&gt;&lt;button data-previewId="4"&gt;&lt;/button&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>After dragging from the top list to the bottom list and pressing the button with <code>data-previewId="3"</code>, the <code>e.target</code> in <code>showCompilationModal</code> is actually the button after it in the dom which is <code>data-previewId="4"</code> and it causes a bug. I can't figure out why or how this happens.</p>