title: Generate different text in every tile javascript
body: <p>I have arrays of strings with names and surnames. I created username which consist of random name and random surname and I want to display different username in every generated tile. I tried to splite names and surnames and than add it do array and get random array index but it didn't work. Better solution would be to use my "username". Biggest problem is that I can't modify my getData() function - it always assign the same username to each tile.</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>function createGrid(x, y) {
      for (var cols = 0; cols &lt; x; cols++) {
          for (var rows = 0; rows &lt; y; rows++) {
              console.log(namesArr)
              console.log(x*y)
              numberOfTiles = x*y;
              var randonIndex = Math.floor(Math.random() * numberOfTiles);
             // $(".usernameSpace").html(namesArr[randomIndex]);
              //Doesn't work here
              $('#container').append("&lt;div class='grid'&gt;&lt;div class = 'usernameSpace'&gt;&lt;/div&gt;&lt;/div&gt;");
          };
      };
      $('.grid').width(800 / x);
      $('.grid').height(800 / x);
  };
  function refreshGrid() {
      var x = $("#colsNumber")[0].value;
      var y = $("#rowsNumber")[0].value;
      $('.grid').remove();
      createGrid(x, y);
  };
  
  function getData(count) {
      var names = ["Michal ", "Jan ", "Katarzyna ", "Andrzej ", "Jozef ", "Bartek ", "Mikolaj ", "Tomasz ", "Julian ", "Brajan ", "Dzesika "];
      var surnames = ["Noga ", "Kowalski ", "Nowak ", "Pazura ", "Duda ", "Komorowski ", "Tomczyk ", "Jozefowicz ", "Lechicki ", "Goldberg "];
      result = [];
  
      for (var i = 0; i &lt; count; i++) {
          var randomNameIndex = Math.floor(Math.random() * names.length);
          var randomSurnameIndex = Math.floor(Math.random() * surnames.length);
          var name = names[randomNameIndex];
          var surname = surnames[randomSurnameIndex];
          result.push({
              name: name,
              surname: surname
          });
      }
      return result
  }
  
  function textDisplay() {
      var numberOfTiles = 12;
      //for (i = 0; i &lt;= numberOfTiles; i++) {
      var data = getData(12);
      //var username = "";
      ////////////////////////////////////////////////////////////////////
      username = "";
      $.each(data, function (i, { name, surname }) {
          username += ` ${name} ${surname}`;
      });
      ////////////////////////////////////////////////////////////////////
      // }
  
      namesToDisplay = "";
      surnamesToDisplay = "";
  
      $.each(data, function (i, { name }) {
          namesToDisplay += `${name}`;
      });
  
      $.each(data, function (i, { surname }) {
          surnamesToDisplay += `${surname}`;
      });
      console.log(username)
      console.log(namesToDisplay)
      console.log(surnamesToDisplay)
  
      //$(".usernameSpace").html(username);
      namesArr = namesToDisplay.split(" ");
      console.log(namesArr)
  
  
      $(".usernameSpace").html(namesArr[2]);
  }
  function AssignUsername(Class, content) {
      var container = document.getElementsByClassName(Class);
      $(container).html(content);
  }
  
  $(document).ready(function () {
      $(".startBtn").click(function () {
          refreshGrid();
          textDisplay();
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
   position: relative;
   margin:auto;
   height:800px;
   width:800px;
  }
  .grid{
   outline:5px solid white;
   margin:0;
   padding:0;
   border:none;
      background-color: #212121;  
   display:inline-block;
   color: white;
  }
  .input{
      width: 15%;
      background-color: #757575;
      font-size: 18px;
      border: 3px;
      height: 4%;
   border-radius: 5px;
   color: white;
  }
  html {
   font-family: 'Arial';
  }
  .startBtn{
   background-color: #4b4b4b;
   border-radius: 10px;
   color: white;
  }
  #textDisplay{
   height:800px;
   width:800px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;head&gt;
      &lt;link rel=stylesheet type="text/css" href="MetroUI 03'2018 basic.css"&gt;
      &lt;script src="jquery.js"&gt;&lt;/script&gt;
      &lt;script src="MetroUI 03'2018 basic.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload="textDisplay()"&gt;
  &lt;p&gt;
      Give me width of grid:
  &lt;/p&gt;
  &lt;div&gt;
      &lt;input class='input' id='colsNumber' type='number'&gt;
  &lt;/div&gt;
  &lt;p&gt;
      Give me height of grid:
  &lt;/p&gt;
  &lt;div&gt;
      &lt;input class='input' id='rowsNumber' type='number'&gt;
  &lt;/div&gt;
  &lt;button class="startBtn"&gt;START!&lt;/button&gt;
  &lt;div class='nameDisplay'&gt;&lt;/div&gt;
  &lt;div class="Container"&gt;&lt;/div&gt;
  &lt;div id = "container"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>