Using SVG symbols with varying text elements

Question

I have a simple rectangle, that I want to use multiple times with a different number showing in each box:

<defs>
  <symbol id="numberCtr">
    <path d="M404.004 13.98h-380c-5.523 0-10 4.478-10 10v580c0 5.523 4.477 10 10 10h380c5.522 0 10-4.477 10-10v-580c0-5.522-4.478-10-10-10" fill="#a4dff8" />
    <path d="M399.543 589.83c0 5.523-4.478 10-10 10H38.465c-5.523 0-10-4.477-10-10V38.133c0-5.523 4.477-10 10-10h351.078c5.522 0 10 4.477 10 10v551.7zm4.46-575.85h-380c-5.522 0-10 4.478-10 10v580c0 5.524 4.478 10 10 10h380c5.523 0 10-4.476 10-10v-580c0-5.522-4.477-10-10-10" fill="#88cde5" />
    <text id="CtrDigit" font-size="545" font-family="Helvetica" x="70" y="510" opacity="0.5">8</text>
  </symbol>
</defs>

I am instantiating them:

<use id="firstOne" xlink:href="#numberCtr" x="35" y="145" transform="scale(0.3)" />
<use id="secondOne" xlink:href="#numberCtr" x="535" y="145" transform="scale(0.3)" />
<use id="thirdOne" xlink:href="#numberCtr" x="1035" y="145" transform="scale(0.3)" />

I've tried this script to change the number, but it changes the number in every instance. How can I control each instance separately (i.e. put a different number in each box)?

window.onload = function() {
  var element = document.getElementById("CtrDigit");
  element.innerHTML = "2";
}