title: Adding content to multiple classes with loops, but only 1 element from each class receive content
body: <p>I have a grid of 6 big squares and inside each square there is 9 smaller squares.
  Inner squares' classes are named i1, i2, i3 and so on.</p>
  
  <p>So I created a loop to change textContent of class elements with:</p>
  
  <pre><code>for(var i = 0; i &lt; 9; i++){
  document.querySelector('.'+'i'+(i+1)).textContent = i+1;
  }
  </code></pre>
  
  <p>HTML looks like this:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row r1" style="background: red"&gt;
      &lt;div class="square o1"&gt;
          &lt;div class="isq i1"&gt;&lt;/div&gt;
          &lt;div class="isq i2"&gt;&lt;/div&gt;
          &lt;div class="isq i3"&gt;&lt;/div&gt;
          &lt;div class="isq i4"&gt;&lt;/div&gt;
          &lt;div class="isq i5"&gt;&lt;/div&gt;
          &lt;div class="isq i6"&gt;&lt;/div&gt;
          &lt;div class="isq i7"&gt;&lt;/div&gt;
          &lt;div class="isq i8"&gt;&lt;/div&gt;
          &lt;div class="isq i9"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="square o2"&gt;
          &lt;div class="isq i1"&gt;&lt;/div&gt;
          &lt;div class="isq i2"&gt;&lt;/div&gt;
          &lt;div class="isq i3"&gt;&lt;/div&gt;
          &lt;div class="isq i4"&gt;&lt;/div&gt;
          &lt;div class="isq i5"&gt;&lt;/div&gt;
          &lt;div class="isq i6"&gt;&lt;/div&gt;
          &lt;div class="isq i7"&gt;&lt;/div&gt;
          &lt;div class="isq i8"&gt;&lt;/div&gt;
          &lt;div class="isq i9"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="square o3"&gt;
          &lt;div class="isq i1"&gt;&lt;/div&gt;
          &lt;div class="isq i2"&gt;&lt;/div&gt;
          &lt;div class="isq i3"&gt;&lt;/div&gt;
          &lt;div class="isq i4"&gt;&lt;/div&gt;
          &lt;div class="isq i5"&gt;&lt;/div&gt;
          &lt;div class="isq i6"&gt;&lt;/div&gt;
          &lt;div class="isq i7"&gt;&lt;/div&gt;
          &lt;div class="isq i8"&gt;&lt;/div&gt;
          &lt;div class="isq i9"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However only elements of "square o1" class received new content, rest of the squares didn't and it looks like this now:</p>
  
  <p><a href="https://i.stack.imgur.com/qw4Af.jpg" rel="nofollow noreferrer">image here</a></p>
  
  <p>My question is, how do I set new content to ALL items of these classes. But better question is how do I control it? In the future I will want to only alter the content of let's say "square o3" children classes, so I won't want to change all of them.</p>
  
  <p>Edit:</p>
  
  <p>Might be worth adding that I could only achieve adding textContent by using querySelector. It didn't work with getElementsByClassName or querySelectorAll and to be honest I don't know why.</p>