Why is Grid-Area through JS being inserted multiple times?

Question

For some reason, through a loop, the grid-area CSS property is set several times and it turns out to be: grid-area: sales_twin_1 / sales_twin_1 / sales_twin_1 / sales_twin_1; (and so on with each element from the loop)

And I need it. so that grid-area = sales_twin_1;

What is the problem, how to fix it?

Here is my script and HTML markup:

const tableArticlesClones = document.querySelectorAll('.twin');

tableArticlesClones.forEach((item, index) => {
   const dataId = item.getAttribute('data-id');


   item.style.gridArea = dataId; 
    console.log('item.style.gridArea:');
   console.log(item.style.gridArea); // Writes: sales_twin_1 / sales_twin_1 / sales_twin_1 / sales_twin_1.
   //i.e it outputs: dataId / dataId / dataId / dataId
   // and I need gridArea = sales_twin_1, i.e. gridArea = dataId (and so with every dataId)

});

<section class="table">
    <div data-id="sales_twin_1" class="table__article table__item sales border-top_grey twin sales_twin_1"><span class="table__p">Продажи</span></div>
    <div data-id="conversion_twin_1" class="table__article table__item conversion border-top_grey twin conversion_twin_1"><span class="table__p">Конверсии</span></div>
    <div data-id="price_twin_1" class="table__article table__item price border-top_grey twin price_twin_1"><span class="table__p">Стоимость</span></div>
    <div data-id="conversion-price_twin_1" class="table__article table__item conversion-price border-top_grey twin conversion-price_twin_1"><span class="table__p">Стоимость <br> конверсии</span></div>
    <div data-id="shows_twin_1" class="table__article table__item shows border-top_grey twin shows_twin_1"><span class="table__p">Показы</span></div>
    <div data-id="clicks_twin_1" class="table__article table__item clicks border-top_grey twin clicks_twin_1"><span class="table__p">Клики</span></div>
    <div data-id="sources_twin_1" class="table__article table__item sources border-top_grey twin sources_twin_1">
        <div class="content-container"><svg class="table__circle" xmlns="http://www.w3.org/2000/svg" width="19" height="20" viewBox="0 0 19 20" fill="none">
                <circle cx="9.5" cy="9.65918" r="9.5" fill="#C4C4C4"></circle>
            </svg>
            <h4 class="table__title">Источники<img class="table__img img_arrow" src="/uAdds/static/media/arrow.75ac89e1.svg"></h4>
        </div>
    </div>
    <div data-id="sources" class="table__article table__item sources border-top_grey">
        <div class="content-container"><svg class="table__circle" xmlns="http://www.w3.org/2000/svg" width="19" height="20" viewBox="0 0 19 20" fill="none">
                <circle cx="9.5" cy="9.65918" r="9.5" fill="#C4C4C4"></circle>
            </svg>
            <h4 class="table__title">Источники<img class="table__img img_arrow" src="/uAdds/static/media/arrow.75ac89e1.svg"></h4>
        </div>
    </div>
    <div data-id="clicks" class="table__article table__item clicks border-top_grey"><span class="table__p">Клики</span></div>
    <div data-id="shows" class="table__article table__item shows border-top_grey"><span class="table__p">Показы</span></div>
    <div data-id="conversion-price" class="table__article table__item conversion-price border-top_grey"><span class="table__p">Стоимость <br> конверсии</span></div>
    <div data-id="price" class="table__article table__item price border-top_grey"><span class="table__p">Стоимость</span></div>
    <div data-id="conversion" class="table__article table__item conversion border-top_grey"><span class="table__p">Конверсии</span></div>
    <div data-id="sales" class="table__article table__item sales border-top_grey"><span class="table__p">Продажи</span></div>
    <div class="table__item table__cell service-title border-top_grey">
        <div class="content-container"><svg class="table__circle" xmlns="http://www.w3.org/2000/svg" width="19" height="20" viewBox="0 0 19 20" fill="none">
                <circle cx="9.5" cy="9.57959" r="9.5" fill="#00B355"></circle>
            </svg><span class="table__p color_blue">Yandex </span><span class="table__desc color_grey">Yandex letai-266319-enc0 </span></div>
    </div>
    <div class="table__item table__cell clicks-count border-top_grey"><span class="table__p">852</span></div>
    <div class="table__item table__cell shows-count border-top_grey"><span class="table__p">8520</span></div>
    <div class="table__item table__cell conversion-price-count border-top_grey"><span class="table__p">1025 ₽</span></div>
    <div class="table__item table__cell price-count border-top_grey"><span class="table__p">102500</span></div>
    <div class="table__item table__cell conversion-count border-top_grey"><span class="table__p">100</span></div>
    <div class="table__item table__cell sales-count border-top_grey"><span class="table__p">10</span></div>
    <div class="table__item table__cell service-title border-top_grey">
        <div class="content-container"><svg class="table__circle" xmlns="http://www.w3.org/2000/svg" width="19" height="20" viewBox="0 0 19 20" fill="none">
                <circle cx="9.5" cy="9.57959" r="9.5" fill="#f00"></circle>
            </svg><span class="table__p color_blue">GoogleAds </span><span class="table__desc color_grey">146-362-7099 </span></div>
    </div>
    <div class="table__item table__cell clicks-count border-top_grey"><span class="table__p">900</span></div>
    <div class="table__item table__cell shows-count border-top_grey"><span class="table__p">18000</span></div>
    <div class="table__item table__cell conversion-price-count border-top_grey"><span class="table__p">931 ₽</span></div>
    <div class="table__item table__cell price-count border-top_grey"><span class="table__p">186200</span></div>
    <div class="table__item table__cell conversion-count border-top_grey"><span class="table__p">200</span></div>
    <div class="table__item table__cell sales-count border-top_grey"><span class="table__p">40</span></div>
</section>

I solved this problem: You just need to set in JS the value for the grid-area through the attribute style.

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

Answer 1

You don't need to worry, this is OK

Grid area is a composite value, having 4 data:

What you are getting is the data you entered transformed into 4 equal values

But this is the standard for the browser, nothing is wrong.