title: I need help to iterate through multiple items with a for loop in JavaScript
body: <p>I need help to understand for loops in JavaScript and how to iterate through multiple items.</p>
  
  <p>I am building a lightbox using vanilla JavaScript based on an example that I found on Codepen here: <a href="https://codepen.io/KielBautista/pen/mxWNOb" rel="nofollow noreferrer">https://codepen.io/KielBautista/pen/mxWNOb</a></p>
  
  <p>I've altered the code to add a title and a cutline above and below the image displayed in the modal.</p>
  
  <p>The titles and cutlines appear on the modal but they do not disappear when changing to the next image. The images change but the titles and cutlines just stack up.</p>
  
  <p>I posted examples online and onto github to ask for help. Please look.</p>
  
  <p>On Github:
  <a href="https://github.com/cwebba1/Vanilla-JS_Lightbox-Slider" rel="nofollow noreferrer">https://github.com/cwebba1/Vanilla-JS_Lightbox-Slider</a></p>
  
  <p>On Codepen:
  Vanilla Responsive Lightbox
  <a href="https://codepen.io/cwebba1/pen/QWjgwxe" rel="nofollow noreferrer">https://codepen.io/cwebba1/pen/QWjgwxe</a></p>
  
  <p>Online are two stages of my development, before and after adding cutlines:</p>
  
  <p>Before adding cutlines:</p>
  
  <p><a href="http://craigwebbart.com/prototypes/Vanilla-JS_Lightbox-Slider/Responsive_Gallery_with_Lightbox_prototype_05.html" rel="nofollow noreferrer">http://craigwebbart.com/prototypes/Vanilla-JS_Lightbox-Slider/Responsive_Gallery_with_Lightbox_prototype_05.html</a></p>
  
  <p><a href="http://craigwebbart.com/prototypes/Vanilla-JS_Lightbox-Slider/assets/js/bautista_05.js" rel="nofollow noreferrer">http://craigwebbart.com/prototypes/Vanilla-JS_Lightbox-Slider/assets/js/bautista_05.js</a></p>
  
  <p>After adding titles and cutlines</p>
  
  <p><a href="http://craigwebbart.com/prototypes/Vanilla-JS_Lightbox-Slider/Responsive_Gallery_with_Lightbox_prototype_08.html" rel="nofollow noreferrer">http://craigwebbart.com/prototypes/Vanilla-JS_Lightbox-Slider/Responsive_Gallery_with_Lightbox_prototype_08.html</a></p>
  
  <p><a href="http://craigwebbart.com/prototypes/Vanilla-JS_Lightbox-Slider/assets/js/bautista_08.js" rel="nofollow noreferrer">http://craigwebbart.com/prototypes/Vanilla-JS_Lightbox-Slider/assets/js/bautista_08.js</a></p>
  
  <p>The key area of code that I think is the problem is this portion:</p>
  
  <pre><code>const galleryItem = document.getElementsByClassName("gallery-item");
  const lightBoxContainer = document.createElement("div");
  const lightBoxContent = document.createElement("div");
  
  const lightBoxImg = document.createElement("img");
  const lightBoxCutline = document.createElement("div");
  const lightBoxTitle = document.createElement("div");
  
  // . . . 
  
  lightBoxContainer.appendChild(lightBoxContent);
  lightBoxContent.appendChild(lightBoxImg);
  lightBoxContent.appendChild(lightBoxPrev);
  lightBoxContent.appendChild(lightBoxNext);
  // These are added 021320 - hackerhurs meetup
  lightBoxContent.appendChild(lightBoxTitle);
  lightBoxContent.appendChild(lightBoxCutline);
  
  document.body.appendChild(lightBoxContainer);
  
  let index = 1;
  
  function showLightBox(n) {
      if (n &gt; galleryItem.length) {
          index = 1;
      } else if (n &lt; 1) {
          index = galleryItem.length;
      }
      let imageLocation = galleryItem[index-1].children[0].getAttribute("src");
     lightBoxImg.setAttribute("src", imageLocation);
  //  let alt = igalleryItem[index-1].children[0].getAttribute('alt');
    let title = galleryItem[index-1].children[0].getAttribute('title');
    if( title )
    {
      lightBoxImg.insertAdjacentHTML('beforeBegin', `&lt;h4 class="title"&gt;${title}&lt;/h4&gt;`); 
  }
    let cutline = galleryItem[index-1].children[0].getAttribute('data-cutline'); //image.data.cutline;
    if( cutline )
    {
      lightBoxImg.insertAdjacentHTML('afterEnd', `&lt;figcaption class="caption"&gt;${cutline}&lt;/figcaption&gt;`); 
    }
  }
  function currentImage() {
      lightBoxContainer.style.display = "block";
  
      let imageIndex = parseInt(this.getAttribute("data-index"));
      showLightBox(index = imageIndex);
      let titleIndex = parseInt(this.getAttribute("title"));
   console.log(this);
      lightBoxTitle(index = title);
       let cutlineIndex = parseInt(this.getAttribute("data-cutline"));
     lightBoxCutline(index = cutline);
  }
  for (let i = 0; i &lt; galleryItem.length; i++) {
      galleryItem[i].addEventListener("click", currentImage);
  }
  function slideImage(n) {
      showLightBox(index += n);
  }
  function prevImage() {
      slideImage(-1);
  }
  function nextImage() {
      slideImage(1);
  }
  lightBoxPrev.addEventListener("click", prevImage);
  lightBoxNext.addEventListener("click", nextImage);
  </code></pre>
  
  <p>The .children[0] statement, I do not understand. Maybe that's it. How can I fix this?</p>