title: How to fill generated table with random values in JavaScript
body: <p>I want to make application teamaker, choose how many players and teams you need, then click button and application will generate a table with random values with a range from Player 1 - Value of input PlayersNum. My biggest problem is table is filling but columns have the same values. What should I do?</p>
  
  <pre><code>  &lt;div class="wrapper"&gt;
          &lt;h1 class="content__header"&gt;Let's create some teams!&lt;/h1&gt;
  
          &lt;form action="#" class="form"&gt;
              &lt;label for="playersNum"&gt;
                  Number of players &lt;input type="number" id="playersNum" class="form__input"&gt;
              &lt;/label&gt;
  
              &lt;label for="teamsNum"&gt;
                  Number of teams &lt;input type="number" id="teamsNum" class="form__input"&gt;
              &lt;/label&gt;
  
              &lt;input type="submit" value="Draw teams" class="form__submit"&gt;
          &lt;/form&gt;
  &lt;/div&gt;
  
  document.addEventListener('DOMContentLoaded',function(){
  const form = document.querySelector(".form");
  
  form.addEventListener("submit", function(e){
      e.preventDefault();
  
          let teamsNum = document.getElementById("teamsNum").value;
              let playersNum = document.getElementById("playersNum").value;
  
          if(playersNum %teamsNum == 0){
              const wrapper = document.querySelector(".wrapper");
              const tbl = document.createElement("table");
              const tblBody = document.createElement("tbody");
  
              for (let i = 0; i &lt; playersNum/teamsNum; i++) {
              let row = document.createElement("tr");
  
              for (let j = 0; j &lt; teamsNum; j++) {
                  let cell = document.createElement("td");
                  let random = Math.floor(Math.random() * playersNum + 1);
                  let cellText = document.createTextNode("Player " + random);
                  cell.appendChild(cellText);
                  row.appendChild(cell);
              }
              tblBody.appendChild(row);
              }
  
              tbl.appendChild(tblBody);
              wrapper.appendChild(tbl);
              tbl.setAttribute("border", "2");
              tbl.style.margin = "20px auto";
              tbl.style.width = "50%";
              tbl.style.textAlign = "center";
  
          } else alert("Teams must have the same number of players!");
  });
  </code></pre>
  
  <p>});</p>
  
  <p><a href="https://i.stack.imgur.com/QLI2m.jpg" rel="nofollow noreferrer">Repeating values</a></p>
  
  <p>As you can see on the picture above, values are repeating. How to make every values without repeats in range from Player 1 to value which we have written in the input.</p>