title: How to generate multiple div at random position inside a parent div using Javascript?
body: <ol>
  <li><p>I am actually trying to create a game when someone hover on the gray area then it will ask if he wants to play if he confirm then random 5 div will appear in some different area of that parent div.</p>
  </li>
  <li><p>at first there should be only 1 big div. when someone will hover a mouse there will be option if he wants to play the game. then the big div will generate 5 small divs inside it. ( next i have delete if someone click small divs and need to track point, so its a small game for just my learning perpose</p>
  </li>
  <li><p>but i stuck here because i can't generate divs in random position. if you run my code you will see 3 divs verticaly appear when you confirm to play</p>
  </li>
  </ol>
  <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>function hoverinside(x) {
      let answer = confirm("Do you want to play the game?");
  
      if (answer == true) {
          alert("Enjoy the game");
          
         myFunction();
      }
      else {
          alert("If you want to play just hover on the gray area again");
          location.reload();
  
      }
  }
  
  
  
  
  function myFunction() {
      
      var element = document.createElement('div');
      element.style.cssText = "width:55px; height:55px; background:green;";
  
      document.body.appendChild(element);
  
      var div1 = document.getElementById("square");
      div1.insertBefore(element, div1.childNodes[5])
  
  
  
      var element2 = document.createElement('div');
      element2.style.cssText = "width:55px; height:55px; background:yellow;"
  
      document.body.appendChild(element2);
  
      var div2 = document.getElementById("square");
      div2.insertBefore(element2, div2.childNodes[5])
  
  
      var element3 = document.createElement('div');
      element3.style.cssText = "width:55px; height:55px; background:red;";
  
      document.body.appendChild(element3);
  
      var div3 = document.getElementById("square");
      div3.insertBefore(element3, div3.childNodes[5])
  
  
  
  }
  
  function removediv1() {
      var element = document.getElementById("div2");
      element.classList.remove("div2");
    }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h1 {
      font-style: bold;
      color: brown;
  }
  #square{
      height: 350px;
      width: 700px;
      background-color: rgb(170, 168, 168);
      border: brown;
      border-style: solid;
  }
  #square1{
      height: 35px;
      width: 70px;
      background-color: rgb(245, 10, 10);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
      &lt;script src="gamejs.js"&gt;&lt;/script&gt;
      &lt;title&gt;Game&lt;/title&gt;
  &lt;/head&gt;
  &lt;body onload=OpenInNewtab(google.com)&gt;
      &lt;h1&gt;Game:&lt;/h1&gt;
      
      &lt;p&gt;we will create the game over here. no problem just wait and chill and play with us.we will create the game over here. no problem just wait and chill and play with us.&lt;/p&gt;
      &lt;h1&gt;Points:&lt;/h1&gt;
      &lt;br&gt;
      &lt;div id="square" onmouseover="hoverinside(this)" &gt;
           &lt;div id="child1"&gt; &lt;/div&gt;
      &lt;/div&gt; 
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>this is my code</p>