title: How to change the thumbnail of three different div when click on a specific div
body: <p>I'm relatively new into html, css and javascript. So far, I have a landing page with a thumbnail gallery. For different reasons, every thumbnail is located in a different div. I used javascript to make the thumbnail change when I click inside the div, and the thumbnail changes. The problem is: when I change to another div I need to click two times to make the script start working.
  My html and js code is:</p>
  
  <pre><code>&lt;div id="thumb1" class="fluid"&gt;&lt;img src="img/image2.jpg" img id="img1" alt=""/&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  var images = ["img/image1.jpg",
                "img/image2.jpg",
                "img/image3.jpg" 
  ],
  
  i = 1;
  for (var j=images.length; j--;) {
  var img = new Image();
  img.src = images[j];
  }
  
  document.getElementById('img1').addEventListener('click', function() {
  this.src = images[i &gt;= images.length - 1 ? i = 0 : ++i];
  }, false);
  &lt;/script&gt;
  
  &lt;div id="thumb2" class="fluid"&gt;&lt;img src="img/imageC.jpg" img id="img2" alt=""/&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  var images2 = [
  "img/imageA.jpg",
  "img/imageB.jpg",
  "img/imageC.jpg",
  "img/imageD.jpg"
  ],
  i = 1;
  for (var j=images2.length; j--;) {
  var img2 = new Image();
  img2.src = images2[j];
  }
  
  document.getElementById('img2').addEventListener('click', function() {
  this.src = images2[i &gt;= images2.length - 1 ? i = 0 : ++i];
  }, false);
  &lt;/script&gt;
  </code></pre>
  
  <p>Is there a way to convert this two scripts (or more) into only one in a simple an easy way? Right now, the script is the same but I don't feel like duplicating the script each time for every div is the most reasonable way to proceed. Moreover, since I will need more than two div, like nine or ten... I don't want a bunch of useless code...Any help would be appreciated. Thank you very much.</p>