Broken bingo card

Squares should change to a random color when clicked. Instead, it's changing to random colors at start and then never again.

HTML

<div id="card" class="wrapper">
  <div class="label">B</div>
  <div class="label">I</div>
  <div class="label">N</div>
  <div class="label">G</div>
  <div class="label">O</div>
  <!--
  <div id="r0c0" class="box">B1</div>
  <div id="r0c1" class="box">I1</div>
  <div id="r0c2" class="box">N1</div>
  <div id="r0c3" class="box">G1</div>
  <div id="r0c4" class="box">O1</div>
  <div id="r1c0" class="box">B2</div>
  <div id="r1c1" class="box">
    <div class="token"></div>
      I2
    </div>
  <div id="r1c2" class="box">N2</div>
  <div id="r1c3" class="box">G2</div>
  <div id="r1c4" class="box">O2</div>
  <div id="r2c0" class="box">B3</div>
  <div id="r2c1" class="box">I3</div>
  <div id="free" class="box">Free</div>
  <div id="r2c3" class="box">G3</div>
  <div id="r2c4" class="box">O3</div>
  <div id="r3c0" class="box">B4</div>
  <div id="r3c1" class="box">I4</div>
  <div id="r3c2" class="box">N4</div>
  <div id="r3c3" class="box">G4</div>
  <div id="r3c4" class="box">O4</div>
  <div id="r4c0" class="box">B5</div>
  <div id="r4c1" class="box">I5</div>
  <div id="r4c2" class="box">N5</div>
  <div id="r4c3" class="box">G5</div>
  <div id="r4c4" class="box">O5</div>
  -->
</div>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

.wrapper {
  display: grid;
  grid-template-columns: 70px 70px 70px 70px 70px;
  grid-gap: 1px;
}

.label {
  font-style: bold;
  text-align: center;
}

.token {
    position: absolute;
    background: blue;
    border-radius: 50%;
    width: 50px;
    height: 50px;
}

.box {
  display: flex;
  border-radius: 3px;
  border-width: 2px;
  border-style: solid;
  padding: 20px;
  font-size: 14px;
  align-content: center;
  justify-content: center;
}

JavaScript

function generateCard() {
  for(var n = 0; n < 5; n++) {
    for(var k = 0; k < 5; k++) {
      var cell = document.createElement("div");
      cell.setAttribute("class", "box");
      cell.setAttribute("id", "r"+n+"c"+k);
      var letter;
      switch(k) {
      	case 0:
        	letter = "B";
          break;
      	case 1:
        	letter = "I";
          break;
      	case 2:
        	letter = "N";
          break;
      	case 3:
        	letter = "G";
          break;
      	case 4:
        	letter = "O";
          break;
      
      }
      cell.innerHTML = letter + n;
      cell.onclick = (function(c) {changeCellColor(c);})(cell);
      
      document.getElementById("card").appendChild(cell);
    }
  }
} 

function changeCellColor(cell) {
	//var cell = getCell(n, k);
  console.log("Changing color for cell " + cell.id);
	cell.style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16);
}

generateCard();