Loop returning very long array even though it is looping 3 times?

Below I am creating two loops.

Basically it first loops through the randomizer array that holds 4 values.This then randomly generates a number that is between 0 and 3 and chooses one of the values from the randomizer array to console.log back in a random order (For example 2,0,3,1).

The next loop is working at creating wrong answers randomly. If this wrong answer doesnt exist in the allAnswers array it will then push that up to the array.

This then loops and creates a button that will be the users answers that they can choose.

All of this works perfectly. Except that my allAnswers array is returning 13 values when it should only have 4 (1 of which being my pre-determined value of 21).

I need it to create 4 buttons each pulling through an answer with the array position between 0-3 and return those unique values without saying undefined. So I am not sure what I am doing wrong in this instance?

var allAnswers = [21],
    randomizer = [0, 1, 2, 3],
    random = 0,
    buttonArea = $("#answerOptions");


for (randomizer, r = randomizer.length; r--; ) {

    random = randomizer.splice(Math.floor(Math.random() * (r + 1)), 1)[0];
    // console.log(random);

    // Generates 3 random wrong answers
    for(wa = 0 ; wa < 3; wa++) {
        wrongAnswers = Math.floor((Math.random() * 100) + 1);
    }

    // Pushes wrong answers to array
    if (allAnswers.indexOf(wrongAnswers) === -1) {
      allAnswers.push(wrongAnswers);
    }
    console.log(random);
    input = $('<div class="col-xs-6"><button class="btn btn-primary answerButton">'+ allAnswers[random] +'</button></div>');
    input.appendTo(buttonArea); 
}

console.log(allAnswers);