title: Javascript function within loop not applying to other divs
body: <p>I'm trying to create a CMS page that loads available hotel rooms. There are key features pertaining to the issue I'm having... there are three div's (these are thumbnails with different views of the hotel room) and then there's a div  which is a preview div (this displays whatever image you are currently you are currently hovering on - when you move your mouse out of the thumbnail div, a default image is displayed)...</p>
  
  <p><a href="https://i.stack.imgur.com/vC8Dg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vC8Dg.png" alt="Example of the CMS with two results from the database"></a></p>
  
  <p>The HTML, CSS, MySQL, PHP works perfectly.
  The div's all populate successfully on the page.</p>
  
  <p>However I'm having an issue with the thumbnail divs. For instance, when I hover on the .thumbOne div of the first element, the .preview div displays a random image from the last element. Same thing with .thumbTwo and .thumbThree. They all display values from the last element.</p>
  
  <p>And then when I go to to the second element and hover on one of the thumbnails, nothing changes on the second element - however this will display the value or image linked to the last element in the first element - same as the previous scenario.</p>
  
  <p>Not sure what I'm doing wrong. But my guess is, this has something to do with getElementById - ID's should be unique, I understand.
  Perhaps I should be using getElementsByClassName - but I tried this and didn't work. The following is the code I have:</p>
  
  <pre><code>&lt;div class="mainContainer"&gt;
  &lt;div class="containerMainContentSOne"&gt;
      &lt;table border='0' align='center' width='800px' height='250px'&gt;
          &lt;tr&gt;
              &lt;?php while ($row = $rs_result-&gt;fetch_assoc()){ ?&gt;          
                  &lt;script type="text/javascript"&gt;
                      function thumbnailOneHover() {
                          document.getElementById("preview").src = "&lt;?php echo ($row['mediaThumbnailOne']); ?&gt;";
                      }
  
                      function thumbnailTwoHover() {
                          document.getElementById("preview").src = "&lt;?php echo ($row['mediaThumbnailTwo']); ?&gt;";
                      }
  
                      function thumbnailThreeHover() {
                          document.getElementById("preview").src = "&lt;?php echo ($row['mediaThumbnailThree']); ?&gt;";
                      }
  
                      function thumbnailLeave() {
                          document.getElementById("preview").src = "&lt;?php echo $row['defaultImage']; ?&gt;";
                      }
                  &lt;/script&gt;
              &lt;td width='700' height='248' valign='top'&gt;  
                  &lt;div class="previewContainer"&gt;
                      &lt;div class="previewThumbnail"&gt;
                          &lt;div class="previewHotel"&gt;
                              &lt;a href='#'&gt;&lt;img class="preview" id="preview" src="&lt;?php echo $row['defaultImage']; ?&gt;" /&gt;&lt;/a&gt;
                              &lt;div class="thumbnailContainer"&gt;
                                  &lt;div class="thumbnailContainerOne"&gt;&lt;img class="thumbnailOne" id="thumbnailOne" onmouseover="thumbnailOneHover()" onmouseout="thumbnailLeave()" src="&lt;?php echo $row['mediaThumbnailOne']; ?&gt;" /&gt;&lt;/div&gt;
                                  &lt;div class="thumbnailContainerTwo"&gt;&lt;img class="thumbnailTwo" id="thumbnailTwo" onmouseover="thumbnailTwoHover()" onmouseout="thumbnailLeave()" src="&lt;?php echo $row['mediaThumbnailTwo']; ?&gt;" /&gt;&lt;/div&gt;
                                  &lt;div class="thumbnailContainerThree"&gt;&lt;img class="thumbnailThree" id="thumbnailThree" onmouseover="thumbnailThreeHover()" onmouseout="thumbnailLeave()" src="&lt;?php echo $row['mediaThumbnailThree']; ?&gt;" /&gt;&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;?php }; ?&gt;
      &lt;/table&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Please excuse me for the ambiguous divs...</p>
  
  <p>so I have tried a couple of things.
  Tried to use the getElementsByClassName:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function thumbnailOneHover() {
      var x = document.getElementsByClassName("preview");
      var i;
      var y = &lt;?php echo $row ?&gt;;
      for (i = 0; i &lt;= y; i++) {
          x[i].src = "&lt;?php echo ($row['mediaThumbnailOne']); ?&gt;";
      } 
  }
  
  function thumbnailTwoHover() {
      var x = document.getElementsByClassName("preview");
      var i;
      var y = &lt;?php echo $row ?&gt;;
      for (i = 0; i &lt;= y; i++) {
          x[i].src = "&lt;?php echo ($row['mediaThumbnailTwo']); ?&gt;";
      } 
  }
  
  function thumbnailThreeHover() {
      var x = document.getElementsByClassName("preview");
      var i;
      var y = &lt;?php echo $row ?&gt;;
      for (i = 0; i &lt;= y; i++) {
          x[i].src = "&lt;?php echo ($row['mediaThumbnailThree']); ?&gt;";
      } 
  }
  
  function thumbnailLeave() {
      var x = document.getElementsByClassName("preview");
      var i;
      var y = &lt;?php echo $row ?&gt;;
      for (i = 0; i &lt;= y; i++) {
          x[i].src = "&lt;?php echo ($row['defaultImage']); ?&gt;";
      } 
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Am I missing something here?
  Thanks in advance and sorry for the extra long post.</p>
  
  <p><a href="https://i.stack.imgur.com/PyjCF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PyjCF.png" alt="enter image description here"></a></p>