Chrome Only - getElementsByClassName error

I am hoping someone might be able to shed some light on this issue. I have this JS code (below) located in packs -> application.js. It grabs the class name and adds additional class. The division's names are temp placeholders. When running in development mode, it works great in all browsers (Chrome, FF, Safari). When tested in a production environment, it works only in FF and Safari. Not in Chrome. Hmmm.... I’ve tried moving the code out of Webpacker (application.js) and received the same results.

The only error Chrome gives is: Uncaught TypeError: Cannot read properties of null (reading 'classList')

I’m certainly open to suggestions, ideas, improvements.

window.addEventListener("load", function (event) {
var divisions = ['one', 'two', 'three', 'four', 'five', 'six']
divisions.forEach(function (item) {
var director_office = document.getElementById(item).getElementsByClassName('google-visualization-orgchart-table')
director_office.item(0).classList.add('table')
})
})

Rails: 6.0.4.4
Ruby: 2.7.3