playing card generator

cards.js

// clubs (♣), diamonds (♦), hearts (♥) and spades (♠)

var cards = [];

var suits = ['♣', '♦', '♥', '♠'];
var numbers = ['A', 'K', 'Q', 'J',
  '10', '9', '8', '7',
  '6', '5', '4', '3',
  '2'
];

var card = document.getElementById('card');


for(var i = 0; i < suits.length; i++) {
  numbers.forEach(function(number){
    var dupNode = card.cloneNode(true);
   
    Array.prototype.forEach.call(dupNode.getElementsByClassName('number'), (function(value){
  value.innerHTML = number; 
 }));
    
    Array.prototype.forEach.call(dupNode.getElementsByClassName('suit'), (function(value){
  value.innerHTML = suits[i]; 
 }));
    
//    dupNode.getElementsByClassName('suit').innerHTML = suits[i];
document.body.appendChild(dupNode);

  });  
  
}





body {
  display: inline-block;
}
.card {
  float: right;
  width: 200px;
  height: 245px;
  border: solid 2px black;
  border-radius: 8px; 
  margin-left: 10px;
}

.card .top{
  position: relative;

  min-height: 20%;
  
}

.card .top span.number{
  float: left;
  display: block;
  font-size: 30px;
}

.card .top span.suit {
  clear: both;
  display: block;
  font-size: 30px;
  background-color: white;
}

.card .middle{

  min-height: 60%;
  text-align: center;
}

.card .middle span {
    padding-top: 10%;
    display: block;
    font-size: 100px;
}

.card .bottom{

  min-height: 20%;
  margin-top: -50px;
}

.card .bottom span.suit{
  float: right;
  display: block;
  font-size: 30px;
}

.card .bottom span.number {
  clear: both;
  float: right;
  display: block;
  font-size: 30px;
  

}

.invert {
  -webkit-transform: rotate(180deg)
}

<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Playing_card_club_A.svg/200px-Playing_card_club_A.svg.png' />

<div class="card" id="card">
  <div class="top">
      <span class="number">A</span>
      <span class="suit">♣</span>
    </div>
  <div class="middle">
    <span class="suit">♣</span>
  </div>
    <div class="bottom">
      <span class="suit invert">♣</span>
      <span class="number invert">A</span>
    </div>
</div>