Javascript: управление данными внутри атрибутов данных в HTML

У меня есть код html/js, который берет данные из json и отображает их в таблице html. Некоторое время он работает нормально. В последнее время количество обрабатываемых элементов значительно увеличилось, и мы больше не можем позволить себе статически помещать данные в html. Итак, я изменил код в html и теперь использую атрибуты данных и JS, который перебирает каждый элемент из файла json и записывает его в правильный атрибут данных в html. Оно работает. У меня есть еще один файл JS, который сканирует все ячейки td, и если выполняется условие, текст в ячейке становится красным или фиолетовым. В противном случае он остается стандартным черным. Раньше это работало, но не больше.

Это новый реализованный HTML-код:

`

<table id = "table" align = "center" render-area = "reboot">
                <thead>
                    <tr>
                        <th class = "text-center" data-tsorter = "input-text">
                            Server Name
                            <img src='/icons/sort.png' width='20' height='20' style='display:inline;'>
                        </th>
                        <th class = "text-center" data-tsorter = "numeric">
                            Last Boot
                            <img src='/icons/sort.png' width='20' height='20' style='display:inline;'>
                        </th>
                    </tr>
                </thead>
                <tbody render-action = "loop">
                    <tr render-data = "json">
                        <td>{!Server Name!}</td>
                        <td>{!Last Boot!}</td>
                    </tr>
                </tbody>
            </table>

` а здесь ниже JS, который больше не работает:

`

const today = new Date();
const todayMonth = (today.getMonth())+1;
const todayDay = today.getDate();
// Query all table cells in document
document.querySelectorAll('table td').forEach(function(td) {
  const srvDay = parseInt(td.innerHTML.split('/')[1]); // day
  if (Number.isInteger(srvDay)){
    const srvMonth = parseInt(td.innerHTML.split('/')[0]); //month
    // If date contained in td text before current date then apply red background style
    if (srvDay != todayDay || srvMonth != todayMonth){
        td.style.color = "red";
    }
  } 
  if ((td.innerHTML.split(' ')[0]).includes('unreachable')){
        td.style.color = "purple";
  }
});

` если я проверю эту таблицу td через консоль, я узнаю, что td html — это !Last Boot! и именно поэтому я считаю, что приведенный выше JS больше не работает. Но если я смотрю на консоль Elements, то вижу, что в DOM все td заполнено правильно. На самом деле все работает нормально, кроме JS выше. Возникает вопрос: как манипулировать данными, которые заполняются с помощью атрибутов данных? Если я использую класс для этого td, я получаю то же самое. Любой намек?

ОБНОВЛЕНИЕ: я обнаружил, что когда данные назначаются динамически, они попадают в HTMLCollection, который я теперь могу прочитать, когда узнал, какой атрибут использовать для выбора правильного элемента html. На самом деле он содержит нужные мне данные с заполненными ячейками td. Но! не знаю, как работать с этой htmlколлекцией. Я пытался, и я получаю странные результаты. Я узнал, что в htmlcollection foreach не работает. Либо преобразуйте его в массив с помощью Array.from(), либо используйте цикл for of. Когда я использую любой из двух, я теряю данные и снова получаю заполнитель {!Last Boot!}. Вот как далеко я продвинулся:

`
function tdTextHandler(renderArea){
  const today = new Date();
  const todayMonth = (today.getMonth())+1;
  const todayDay = today.getDate();
  const newArr = document.querySelectorAll(`[render-area = "${renderArea}"]`);
  newArr.forEach(function(e) {
  const newArr4 = (Array.from(e.children))[1].children
  
 console.info(newArr4);


for (item of newArr4) {
  console.info(item);
  const srvDay = parseInt(item.innerHTML.split('/')[1]); // day
  
  if (Number.isInteger(srvDay)){
    const srvMonth = parseInt(item.innerHTML.split('/')[0]); //month
    // If date contained in td text before current date then apply red background style
    if (srvDay != todayDay || srvMonth != todayMonth){
        item.style.color = "red";
    }
  } 
  if ((item.innerHTML.split(' ')[0]).includes('unreachable')){
        item.style.color = "purple";
  }
};

`

первый console.info говорит мне, что у меня есть htmlколлекция, и в консоли я вижу, что в ее записях есть данные. Но второй console.info показывает, что данные пропали, хотя структура есть и я вернулся к заполнителю.