I'm trying to create several divs inside the div which has the id "second".

<div>
    <div class="content" id="first" hidden></div>
    <div class="content" id="second" hidden></div>
    <div class="content" id="third" hidden></div>
</div>

I've tried the following function but it does not work.

  function createboard(){
    for(let i=0;i<10;i++){
      let newDiv = document.createElement("div");
      newDiv.className="column";
      newDiv.id="column";
      document.getElementById("second").appendChild(newDiv);
    }
  }

The function that removes the hidden attribute from the div

function hide_div(){
      if(document.getElementById("cavidades").value == "" || document.getElementById("sementes").value==""){
        alert("Preencha todos os dados de jogo antes de começar");
      }
      else{
        var start_div = document.getElementById("start_div");
        start_div.hidden=true;
        var login=document.getElementById("login");
        login.hidden=true;
        var first = document.getElementById("first");
        var second = document.getElementById("second");
        var third = document.getElementById("third");
        var inside=document.getElementById("inside");
        first.hidden=false;
        second.hidden=false;
        third.hidden=false;
        inside.hidden=false;
      }

Both are supposed to run when this button is clicked

<button hidden type="submit" id="start" onclick="hide_div() ; createboard()">Começar</button>

CSS of both divs

  div#second{
    float: left;
    background-color: lightgray;
    height: 500px;
    width: 500px;
    border: 5px solid black;
  }

  div#column{
    float: left;
    background-color: green;
    height: 50px;
    width: 50px;
    border: 5px solid yellow;
  }