AEM HTL repeating an element containing "data-sly-resource" using data-sly-repeat

Question

I am trying to loop through an div element containing "data-sly-resource" to be able to include that component as a child.

I have a table element where each cell has an individual authoring interface using a child component. I get two counts that is rowCount as array of "x" and columnCount as array of "y". I'm able to iterate through the class="table-cell" and am able to add "y" number of columns with their respective child components using data-sly-resource . But when I'm trying to iterate through class="table-row" using rowcount it only iterates the content and adds "y" number of rows but doesn't add child components in the rows

thank you

<div class="table">

    <sly data-sly-list.card="${rowCount.array}">
        <div class="table-row">
            <sly data-sly-list.card="${columnCount.array}">
                <div class="table-cell" data-sly-test.resourceNode="${['cell', card.intValue] @join='-'}">
                    <div data-sly-resource="${ @path=resourceNode,
                     resourceType='example/components/content/tableLongForm/rte'}"
                        data-sly-unwrap="${!wcmmode.edit && !wcmmode.preview}" style="width:60px;"></div>
                </div>
            </sly>

        </div>
    </sly>
</div>

Authoring Interface Image

Answer 1

You are using the same identifier card for the list items in the nested loops, perhaps you meant it as:

<div class="table">

    <sly data-sly-list.row="${rowCount.array}">
        <div class="table-row">
            <sly data-sly-list.card="${columnCount.array}">
                <div class="table-cell" data-sly-test.resourceNode="${['cell', row.intValue, card.intValue] @ join='-'}">
                    <div data-sly-resource="${ @path=resourceNode,
                     resourceType='example/components/content/tableLongForm/rte'}"
                        data-sly-unwrap="${!wcmmode.edit && !wcmmode.preview}" style="width:60px;"></div>
                </div>
            </sly>

        </div>
    </sly>
</div>