Javascript error while creating html elements from array

Question

I encountered an error trying to build a christmas calendar site. I wrote a christmas calender where basically every day is a button. Then i wanted to take all these buttons and shuffle them randomly back into a random row so you have to actively go looking for the day your are trying to click on.

Now this works very well except that sometimes a button on the right does not get created at all. Sometimes its even multiple buttons. I honestly don't understand why this is happening. It only happens like once every 20 tries. So if you try this out please try multiple times until you see the error. You will be able to spot a gap on the right side where a button should be but was not created at all.

I would be extremely grateful for any ideas/help provided! Thank you guys so much in advance.

var alleCols = $('.col');
var alleRows = $('.row');

// Die rows leeren
alleRows.empty();

//durch alle cols gehen
var length = alleCols.length;
for(var i = 0; i < length; i++){
  // 24(länge die am anfang vorhanden ist) mal durch das array gehen
  do{
    //einen zufälligen rowindex holen
    var rowindex = Math.floor(Math.random()*alleRows.length);
    //den row mit dem zufällig generierten index ziehen
    var randomrow = alleRows.get(rowindex);
    //falls diese row noch weniger als 6 elemente in sich hat
    if(randomrow.childElementCount < 6){
      //zufälligen colindex holen
      var colindex = Math.floor(Math.random()*alleCols.length);
      //zufällig generierten col ziehen und an die row anhängen
      alleRows.get(rowindex).appendChild(alleCols.get(colindex));
      //zufällig generierten col aus dem array kicken
      alleCols.splice($.inArray(alleCols.get(colindex), alleCols), 1);
    }
    //wiederholen bis man ein randomrow gefunden hat das noch keine 6 elemente in sich hat
  }while(randomrow.childElementCount < 6)

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

    <div class="row">
        <div class="col s2">
            <button id="eins" class="text">
                EINS
            </button>
        </div>

        <div class="col s2">
            <button id="zwei">
                2
            </button>
        </div>

        <div class="col s2">
            <button id="drei">
                3
            </button>
        </div>

        <div class="col s2">
            <button id="vier" class="text">
                VIER
            </button>
        </div>

        <div class="col s2">
            <button id="fuenf">
                5
            </button>
        </div>

        <div class="col s2">
            <button id="sechs">
                6
            </button>
        </div>
    </div>

    <div class="row">
        <div class="col s2">
            <button id="sieben" class="text">
                SIEBEN
            </button>
        </div>

        <div class="col s2">
            <button id="acht">
                8
            </button>
        </div>

        <div class="col s2">
            <button id="neun">
                9
            </button>
        </div>

        <div class="col s2">
            <button id="zehn" class="text">
                ZEHN
            </button>
        </div>

        <div class="col s2">
            <button id="elf">
                11
            </button>
        </div>

        <div class="col s2">
            <button id="zwoelf" class="text">
                ZWÖLF
            </button>
        </div>

    </div>

    <div class="row">
        <div class="col s2">
            <button id="dreizehn">
                13
            </button>
        </div>

        <div class="col s2">
            <button id="vierzehn" class="text">
                VIERZEHN
            </button>
        </div>

        <div class="col s2">
            <button id="fuenfzehn" class="text">
                FÜNFZEHN
            </button>
        </div>

        <div class="col s2">
            <button id="sechszehn">
                16
            </button>
        </div>

        <div class="col s2">
            <button id="siebzehn" class="text">
                SIEBZEHN
            </button>
        </div>

        <div class="col s2">
            <button id="achtzehn">
                18
            </button>
        </div>

    </div>

    <div class="row">
        <div class="col s2">
            <button id="neunzehn" class="text">
                NEUNZEHN
            </button>
        </div>

        <div class="col s2">
            <button id="zwanzig" class="text">
                ZWANZIG
            </button>
        </div>

        <div class="col s2">
            <button id="einundzwanding">
                21
            </button>
        </div>

        <div class="col s2">
            <button id="zweiundzwanzig">
                22
            </button>
        </div>

        <div class="col s2">
            <button id="dreiundzwanzig">
                23
            </button>
        </div>

        <div class="col s2">
            <button id="vierundzwanzig" class="text">
                VIERUNDZWANZIG
            </button>
        </div>
    </div>

</div>

Answer 1

I honestly couldn't think of an explanation, but I have an alternative proposal for you.

Instead of creating random index numbers for where you append the buttons, I would rather shuffle the array if columns and then append them in a regular for each loop.

Here is an example that uses a shuffle function I took from another SO question:

var alleCols = $('.col');
var alleRows = $('.row');

//durch alle cols gehen
var length = alleCols.length;

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

shuffle(alleCols);

var rowIndex = 0;
alleCols.each(function(colIndex){
  if(colIndex >= 6 && colIndex % 6 === 0){
    rowIndex++;
  }
  
  alleRows.eq(rowIndex).append(alleCols.eq(colIndex));
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

    <div class="row">
        <div class="col s2">
            <button id="eins" class="text">
                EINS
            </button>
        </div>

        <div class="col s2">
            <button id="zwei">
                2
            </button>
        </div>

        <div class="col s2">
            <button id="drei">
                3
            </button>
        </div>

        <div class="col s2">
            <button id="vier" class="text">
                VIER
            </button>
        </div>

        <div class="col s2">
            <button id="fuenf">
                5
            </button>
        </div>

        <div class="col s2">
            <button id="sechs">
                6
            </button>
        </div>
    </div>

    <div class="row">
        <div class="col s2">
            <button id="sieben" class="text">
                SIEBEN
            </button>
        </div>

        <div class="col s2">
            <button id="acht">
                8
            </button>
        </div>

        <div class="col s2">
            <button id="neun">
                9
            </button>
        </div>

        <div class="col s2">
            <button id="zehn" class="text">
                ZEHN
            </button>
        </div>

        <div class="col s2">
            <button id="elf">
                11
            </button>
        </div>

        <div class="col s2">
            <button id="zwoelf" class="text">
                ZWÖLF
            </button>
        </div>

    </div>

    <div class="row">
        <div class="col s2">
            <button id="dreizehn">
                13
            </button>
        </div>

        <div class="col s2">
            <button id="vierzehn" class="text">
                VIERZEHN
            </button>
        </div>

        <div class="col s2">
            <button id="fuenfzehn" class="text">
                FÜNFZEHN
            </button>
        </div>

        <div class="col s2">
            <button id="sechszehn">
                16
            </button>
        </div>

        <div class="col s2">
            <button id="siebzehn" class="text">
                SIEBZEHN
            </button>
        </div>

        <div class="col s2">
            <button id="achtzehn">
                18
            </button>
        </div>

    </div>

    <div class="row">
        <div class="col s2">
            <button id="neunzehn" class="text">
                NEUNZEHN
            </button>
        </div>

        <div class="col s2">
            <button id="zwanzig" class="text">
                ZWANZIG
            </button>
        </div>

        <div class="col s2">
            <button id="einundzwanding">
                21
            </button>
        </div>

        <div class="col s2">
            <button id="zweiundzwanzig">
                22
            </button>
        </div>

        <div class="col s2">
            <button id="dreiundzwanzig">
                23
            </button>
        </div>

        <div class="col s2">
            <button id="vierundzwanzig" class="text">
                VIERUNDZWANZIG
            </button>
        </div>
    </div>

</div>