title: why moving Elements using appendChild wont work on JS
body: <p>I'm trying to move some pictures on Mobile view and remove them from the previous Places.
  I've tried this code, but it ends up with this error: TypeError: picPos is null ?
  whenever I console log the pic or picPos, the log looks exactly the way it should be.
  can any one understand why?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>btn.addEventListener("click",function(){
    for(var i = 0; i&lt;=3; i++){
      let picPos = document.getElementById("container"+(i+1));
      let pic = document.getElementById("box"+(i+1));
      picPos.appendChild(pic);
    }
    
    })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container2&gt;div{
    height:50px;
    width:50px;
    background-color:red;
    margin:5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container1"&gt;&lt;/div&gt;
  &lt;div id="container2"&gt;&lt;/div&gt;
  &lt;div id="container3"&gt;&lt;/div&gt;
  
  &lt;div id="container2"&gt;
    &lt;div id="box1"&gt;1&lt;/div&gt;
    &lt;div id="box2"&gt;2&lt;/div&gt;
    &lt;div id="box3"&gt;3&lt;/div&gt;
  &lt;/div&gt;
  &lt;button id="btn"&gt;Click&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>