create a function to display a game board

function displayBoard(value)

create variables for the function to get the value for the number of cards, instantiate the array, and get the div element by id so I can insert my future div's

var numOfCards = value * 2; //number of cards that we will have on the board by multiplying input value by 2
var letters2 = ["A", "B", "A", "B"]; // setting up an array of letters to use for the card faces
var gameDiv = document.getElementById("game"); //getting the game div element

create a for loop that goes through the number of cards, and creates a new div element and sets a unique id to that div, as well as pulling out a RANDOM letter from the array and storing in the inner html of a div element. I only need to pull the items out one time but it is not working. I tried to pop the element that I pull from the array but it seems to be by passing that method.

for (var i = 0; i < numOfCards; i++) 
    {
        var cards = document.createElement("div"); //creating an div element that is set to variable cards
        cards.setAttribute("id", "card" + [i]); //setting each card with a unique ID
        gameDiv.appendChild(cards); //appending the div elements to the "game" div
        var currentCard = document.getElementById("card" + [i]);//creating a variable for the current card and getting the id to input text
        var randomItem = letters2[Math.floor(Math.random() * letters2.length)]; //create random item to store random array variable
        currentCard.innerHTML = randomItem; //setting the current cards html to the random array value
        letters2.pop(currentCard); //popping the array item so that it can not be used more than once

    }

thanks for all the help!