Javascript – I'm trying to make a div have a randomly generated string shift to the left then have a character add to the end to create a scroll-like effect

I’ve started trying to learn javascript, html and css in codepen over the past few days and I am trying to make a matrix code rain type effect. I do have experience in other programming languages. I have the divs scrolling down over a certain period of time with the randomly generated strings. However, when I try to save the appropriate string (in the form of an array) to another array to later be used to shift that string over one and add a new random character. Instead of doing this the entire array called store is set to the most recent string (in the form of an array)

Below is my javascript code (include console.log for my attempt at debugging)

var numDivs = 10;
var pos = [];
var delay = [];

/* Check page is loaded and create each of the divs for the 'raindrops' */
for (let i = 0; i < numDivs; i++) {
  document.addEventListener('DOMContentLoaded', function() {
      var div = document.createElement('div');
      div.id = 'matrix'+i;
      div.className = 'matrixC m'+i;

      document.body.appendChild(div);
  }, false);
}

/* Generate 12 character string for each of the 'raindrops' */
var characters = ["日", "ﾊ","ﾐ","ﾋ","ｰ","ｳ","ｼ","ﾅ","ﾓ","ﾆ","ｻ","ﾜ","ﾂ","ｵ","ﾘ","ｱ","ﾎ","ﾃ","ﾏ","ｹ","ﾒ","ｴ","ｶ","ｷ","ﾑ","ﾕ","ﾗ","ｾ","ﾈ","ｽ","ﾀ","ﾇ","ﾍ","0","1","2","3","4","5","7","8","9","Z",":","・",".",'"',"=","*","+","-","<",">","¦","｜","ç","ｸ"];

var store = [];
var state2 = "false";

function genNum() {
  var stringArr = [];
  for (let n = 0; n < numDivs; n++) {
    var finalString = "";
    var char = 0;
    if (state2 == "false"){
      var state = "false";
    }
    
    if (state == "false"){
      for (let m = 0; m < 20; m++) {
        let char = characters[Math.floor(Math.random() * characters.length)];
        finalString += char;
        stringArr[m] = char;
      }
      state = "true";
    }
    else {
      stringArr = store[n];
      stringArr.shift();
      let char = characters[Math.floor(Math.random() * characters.length)];
      stringArr[19] = char;
      for (let i = 0; i < stringArr.length; i++) {
        finalString += stringArr[i];
      }
    }
    store[n] = stringArr;
    console.log(n + ": " + finalString+", " + stringArr);
    console.log(store);
    document.getElementById("matrix"+n).innerHTML = finalString;   
  }
  state2 = "true";
}

setInterval(genNum, 100); /* Regenerate string from above every 0.15s */

let root = document.documentElement;
for (let i = 0; i < numDivs; i++) {
  pos[i]=((Math.random() * 100) + "vw"); /* Set random position across page */
}
for (let i = 0; i < numDivs; i++) {
  delay[i]=((Math.random() * 10) + "s"); /* Set random offset time for start of animation */
}


let dynamicStyles = null;

function addAnimation(body) { /* create animation function using parsed code */
  if (!dynamicStyles) {
    dynamicStyles = document.createElement('style');
    dynamicStyles.type = 'text/css';
    document.head.appendChild(dynamicStyles);
  }

  dynamicStyles.sheet.insertRule(body, dynamicStyles.length);
}

for (let i = 0; i < numDivs; i++) { /* For each 'raindrop' create animation from random point across page down to off-screen */
  addAnimation(`
  @keyframes fall`+i+` { 
    from {
      transform: translate(`+pos[i]+`,-150%);
    } 
    to {
      transform: translate(`+pos[i]+`,100vh);
    }
   }`);
}

/* Give each div their corresponding animation, specifying all details */
document.addEventListener("DOMContentLoaded", function () {
  for (let i = 0; i < numDivs; i++) {
    document.getElementById("matrix"+i).style.animation = "fall"+i+" 7.5s linear "+delay[i]+" infinite"; 
  }
});

If you need it I also have my css here:

body {
  background-color: black;
}

.matrixC {
  transform: translate(-200%,-200%); /* Make sure none are on screen at start*/
  font-size: 10px;
  width: 5px; /* Keeps text vertical */
  display: inline-block;
  text-align: center;
  word-wrap: break-word; /* Keeps text vertical */
  background: linear-gradient(black, #d0ebc4); /* Creates fade effect from bottom to top */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px #70ea37;  /* Creates glow */
  margin: -5px; /* For some reason makes it more evenly spread */
}

I have tried moving the store state to different positions in the code as well as changing it to a switch case which specified exactly which part of the array to be changed but this still outputed the same error.