title: displaying & styling strings in dynamic array
body: <p>I am new to js and am trying to find ways to display &amp; style strings in an array above images.</p>
  
  <p>JS:</p>
  
  <pre><code>NEW_COMMENTS = ["five", "six", "seven"];    
  
  function testFunction()
  {
      var log = ["one", "two", "three", "four"];
      var srcOne = "rdmImg.jpg";
      var srcTwo = "specificImg.jpg";
  
      imgContainer = document.getElementById("container");
  
      img = [];
      for (i = 0; i &lt; log.length; i++)
      {
          img[i].src = srcOne;
          document.getElementById("container").appendChild(img[i]);
      }
  }
  
  
  
  </code></pre>
  
  <p>All images are assigned to srcOne and set to srcTwo if clicked. Suppose img[0] is clicked (not shown), then img[1],img[2],img[3] will display log[1],log[2], and log[3] respectively. </p>
  
  <p>The issue is that the 'log' array always contains index 0 and so despite img[0] is clicked, it will still display a comment. How do you make it so that when any srcOne image is clicked, it will NOT display a comment while the other srcOne images will display comments? </p>
  
  <p>Any help is very appreciated. </p>