Почему grid-area через javascript вставляется несколько раз?

Почему-то через цикл свойство grid-area устанавливается несколько раз и оно получается равно: grid-area: sales_twin_1 / sales_twin_1 / sales_twin_1 / sales_twin_1; (и так с каждым элементом из цикла)

А вот бордер ставится корректно и правильно (т.е. всего 1 раз) Как мне сделать так, чтобы grid-area устанавливалась всего один раз и имела вид: grid-area: sales_twin_1 ?

Вот мой скрипт:

for(let i = 0; i<countToPaste; i++){
           
           tech++;
           
           console.log(`tech: ${tech}`)
           
           tableArticles.forEach((item, index) => {
            
          
            const dataId = item.getAttribute('data-id');
            const tableArticleClone = item.cloneNode(true);
            

          
            if(currentZ!=1){
                tableArticleClone.setAttribute('data-id', `${dataId}_twin_${currentZ-tech}`);
                tableArticleClone.classList.add('twin', `${dataId}_twin_${currentZ-tech}`);
                 
                
                tableArticleClone.style.border = '1px solid red';
                tableArticleClone.style.gridArea =`${dataId}_twin_${currentZ-tech}`;
                
                 table.prepend(tableArticleClone);   
               
            }   

          });
           
            
       }

Я решил эту проблему: Просто нужно устанавливать в JS значение для grid-area через атрибут style.

item.setAttribute('style', `grid-area: ${dataId}`)