title: Dynamically updating divs using for LOOP
body: <p>I've been trying to use a for loop to dynamically update divs, but there seems to be a problem. The first time I run it runs fine and chrome logs...</p>
  
  <pre><code> gallery.js:9                       class length = 1
   gallery.js:11                      testing uniqueId-&gt; product_1
   gallery.js:13                      adding uniqueID product_1 to class
   gallery.js:15                      j is --&gt;0
   gallery.js:17                      updated n.o of images in the class to 1
  </code></pre>
  
  <p>but the second time I run it something goes wrong...</p>
  
  <pre><code> gallery.js:9                       class length = 2
   gallery.js:11                      testing uniqueId-&gt; product_2
   gallery.js:13                      adding uniqueID product_2 to class
   gallery.js:15                      j is --&gt;0
   gallery.js:13                      adding uniqueID product_2 to class
   gallery.js:15                      j is --&gt;1
   gallery.js:17                      updated n.o of images in the class to 2
  </code></pre>
  
  <p>As you can see line 13-15 repeat and somehow, that names all the divs the same, e.g from product_0 to product_1...etc..</p>
  
  <p>Heres the code:</p>
  
  <pre><code>    var clss = document.getElementsByClassName('thumbnail');
      var clssLength = clss.length;
      console.log('class length = ' + clssLength);
      var uniqueId = "product_" + clssLength;
      console.log('testing uniqueId-&gt; ' + uniqueId);
      for (var j = 0; j &lt; clss.length; j++) {
          clss[j].setAttribute('id', uniqueId);
          console.log('j is --&gt;' + j);
      }
  </code></pre>
  
  <p>Thanks in advance</p>