title: JavaScript - loop in button in forEach loop
body: <p>Can anyone Please help me. Im stuck in this code for about weeks now. </p>
  
  <p>What I'm trying to do is have an image slider with buttons on the bottom of the image that will display corresponding information of the image in a modal.</p>
  
  <pre><code>&lt;div class=swipeManual&gt;
  &lt;c:forEach var = "tempCustomer" items = "${customers}"&gt;
  &lt;img id="imgS" src="${pageContext.request.contextPath}/resources/images/${tempCustomer.image}"  style="z-index:-2" &gt;
  &lt;button class="buttonImg myBtn" type="button" style="z-index:-1"&gt;Click Me!&lt;/button&gt;
  &lt;div id="myModal" class="modal"&gt;
  
   &lt;!-- Modal content --&gt;
  &lt;div class="modal-content"&gt;
  &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
  &lt;p&gt;${tempCustomer.description}&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/c:forEach&gt;
  </code></pre>
  
  <p>Here is the JavaScript</p>
  
  <pre><code>&lt;script&gt;
  
  var buttons = document.querySelectorAll('.buttonImg');
  
  function clickHandler(em) {
  var modal = document.getElementById(em);    
  modal.style.display = "Block";
  }
  
  for (var i = 0; i &lt; buttons.length; i++) {
  (function () {
  
      var but = buttons[i].parentNode.id;
  
      buttons[i].addEventListener("click", function() { clickHandler(but)}, false);
  
  }()); // immediate invocation
  }
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Edited</p>
  
  <p>Please can anybody please help me. Im stuck in this code forever. </p>
  
  <p><a href="https://i.stack.imgur.com/NCP9X.png" rel="nofollow noreferrer">Image is here</a>
  <a href="https://i.stack.imgur.com/ZWQU9.png" rel="nofollow noreferrer">Image 2</a></p>