[FINoM]

$(document.createElement("div")).attr({ "class" : "card", "id" : "thirdCard" })

Можно, кстати, делать компактнее:

$('<div/>',{ "class" : "card", "id" : "thirdCard" })

function initialize(context)
{
  *!*
cards = context.cards,
*/!*
  // Add First Card
  firstCard = context.firstCard,
   // Add Second Card
  secondCard = context.secondCard,
  // Add Third Card
  thirdCard = context.thirdCard;
cards.append(firstCard);
cards.append(secondCard);
cards.append(thirdCard);

А здесь var не помешает, хотя подобное присваивание бессмысленно в данном случае.

По вопросу:

var ids = ['firstCard', 'secondCard', 'thirdCard' /* , ... */], // хотя я совершенно не понимаю, зачем здесь делать статичные айдишники.
  cards = $('<div/>',{ "id" : "cards" });

$.each( ids, function( index, id ){ //id === this, кому как удобно
  $('<div/>',{ "class" : "card", "id" : id }).appendTo( cards )
});