title: How can I add same click event in new node made by using cloneNode, appendChild. (in forEach() syntax)
body: <p>My purpose is to make an infinite imageview function.</p>
  <p>So I succeeded adding same movement, and new element using <code>cloneNode</code>, <code>appendChild</code>, but that button in the new element doesn't work with the same click event.</p>
  <p>How can I add same click event to new elements?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let listMarginTop = 70;
  let listMarginLeft = 40;
  let list = document.getElementById('firstLine');
  let lists = document.getElementsByTagName('li');
  let listsArr = [...lists];
  let z = 10;
  let transDelay = 1;
  let xBtn = document.getElementsByClassName('xBtn');
  let xBtnArr = [...xBtn];
  
  for(let i = 0; i &lt; listsArr.length; i++)
  {
      listsArr[i].style.transition = 'all 0.5s linear ' + transDelay + 's';
      transDelay -= 0.1;
      listsArr[i].style.zIndex = z;
      z--;
      listsArr[i].style.marginTop = listMarginTop + 'vh';
      listsArr[i].style.marginLeft = listMarginLeft + 'vw';
      listMarginTop -= 6;
      listMarginLeft -= 6;
  }
  let lastChildMarginTop = 12;
  let lastChildMarginLeft = -20;
  xBtnArr.forEach((x) =&gt; {
      x.addEventListener('click', () =&gt; {
          let copyWindow  = x.parentElement.parentElement.cloneNode(true);
          x.parentElement.parentElement.style.opacity = '0';
          copyWindow.style.marginTop = parseInt(list.lastChild.style.marginTop) - 6 + 'vh';
          copyWindow.style.marginLeft = parseInt(list.lastChild.style.marginLeft) - 6 + 'vw';
          copyWindow.style.zIndex = z;
          z--;
          lastChildMarginTop -= 6;
          lastChildMarginLeft -= 6;
          list.appendChild(copyWindow);
          let listChildArr = [...list.childNodes];
          listChildArr.forEach(win =&gt; {
              win.style.marginTop = parseInt(win.style.marginTop) + 6 + 'vh';
              win.style.marginLeft = parseInt(win.style.marginLeft) + 6 + 'vw';
          })
          xBtn = document.getElementsByClassName('xBtn');
          xBtnArr = [...xBtn];
          console.log(xBtnArr);
      })
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {margin: 0; padding: 0; border: 0;}
  ul
  {
      list-style-type: none;
      position: relative;
  }
  
  
  .rightMain
  {
      height: 100vh;
      flex: 7;
      flex-wrap: wrap;
      overflow: hidden;
  }
  
  #container
  {
      position: absolute;
      z-index: 3;
  }
  
  ul li
  {
      margin-top: -10vh;
      margin-left: -10vw;
      position: absolute;
  }
  
  .showWindow
  {
      width: 25vw;
      height: 25vh;
      border: 1px solid black;
      background-color: white;
  }
  
  .showWindow button
  {
      margin: 0.5vw 0.5vw 0;
      width: 1vw;
      height: 1vw;
      border-radius: 50%;
      border: 1px solid black;
      background-color: white;
      cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id='rightMain' className='rightMain'&gt;
              &lt;div id="container"&gt;
                  &lt;ul id='firstLine'&gt;
                      &lt;li&gt;
                          &lt;div className='showWindow'&gt;
                              &lt;button className='xBtn'&gt;&lt;/button&gt;
                              &lt;button&gt;&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;div className='showWindow'&gt;
                              &lt;button className='xBtn'&gt;&lt;/button&gt;
                              &lt;button&gt;&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;div className='showWindow'&gt;
                              &lt;button className='xBtn'&gt;&lt;/button&gt;
                              &lt;button&gt;&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;div className='showWindow'&gt;
                              &lt;button className='xBtn'&gt;&lt;/button&gt;
                              &lt;button&gt;&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;div className='showWindow'&gt;
                              &lt;button className='xBtn'&gt;&lt;/button&gt;
                              &lt;button&gt;&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;div className='showWindow'&gt;
                              &lt;button className='xBtn'&gt;&lt;/button&gt;
                              &lt;button&gt;&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;div className='showWindow'&gt;
                              &lt;button className='xBtn'&gt;&lt;/button&gt;
                              &lt;button&gt;&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;div className='showWindow'&gt;
                              &lt;button className='xBtn'&gt;&lt;/button&gt;
                              &lt;button&gt;&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;div className='showWindow'&gt;
                              &lt;button className='xBtn'&gt;&lt;/button&gt;
                              &lt;button&gt;&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;div className='showWindow'&gt;
                              &lt;button className='xBtn'&gt;&lt;/button&gt;
                              &lt;button&gt;&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>