Loop 2d array in same html tag on thymleaf - thymeleaf

Question

I have this html to render in thymleaf:
<div id="puzzle">
<div number="1" class="cell-puzzle row-1 col-1">1</div>
<div number="2" class="cell-puzzle row-1 col-2">2</div>
<div number="3" class="cell-puzzle row-1 col-3">3</div>
<div number="4" class="cell-puzzle row-1 col-4">4</div>
<div number="5" class="cell-puzzle row-2 col-1">5</div>
<div number="6" class="cell-puzzle row-2 col-2">6</div>
<div number="7" class="cell-puzzle row-2 col-3">7</div>
<div number="8" class="cell-puzzle row-2 col-4">8</div>
<div number="9" class="cell-puzzle row-3 col-1">9</div>
<div number="10" class="cell-puzzle row-3 col-2">10</div>
<div number="11" class="cell-puzzle row-3 col-3">11</div>
<div number="12" class="cell-puzzle row-3 col-4">12</div>
<div number="13" class="cell-puzzle row-4 col-1">13</div>
<div number="14" class="cell-puzzle row-4 col-2">14</div>
<div number="15" class="cell-puzzle row-4 col-3">15</div>
<div number="0" class="cell-puzzle row-4 col-4 cell-puzzle-zero"></div>
</div>
here is implementation on thymleaf:
<div id="puzzle">
<span th:each="row,iter : *{matrix}" >
<div th:each="col, iter2: ${row}" th:attr="number=${iter.index + 1}" th:class="'cell-puzzle row-' + ${iter.index + 1} + ' col-' + ${iter2.index + 1}" th:text="${col}"></div>
</span>
<div number="0" class="cell-puzzle row-4 col-4 cell-puzzle-zero"></div>
</div>
i need to wrap div inside span to have two th:each
output html will be different with original.
When i try to merge two th:each into same div then it throw
error:
<div id="puzzle">
<div th:each="row,iter : *{matrix}" th:each="col, iter2: ${row}" th:attr="number=${iter.index + 1}" th:class="'cell-puzzle row-' + ${iter.index + 1} + ' col-' + ${iter2.index + 1}" th:text="${col}"></div>
<div number="0" class="cell-puzzle row-4 col-4 cell-puzzle-zero"></div>
</div>
error:
org.attoparser.ParseException: (Line = 31, Column = 74) Malformed markup: Attribute "th:each" appears more than once in element
I know the alternative way of this one is translate 2d array into 1d array, but then we need to calculate index manually. so please skip this way \
Does anyone know how to use only thymleaf on this case?

Answer 1

Use a <th:block /> instead of the <span />. You can put a th:each in it, and it won't output anything.
<div id="puzzle">
<th:block th:each="row,iter : *{matrix}">
<div th:each="col, iter2: ${row}" th:attr="number=${iter.index + 1}" th:class="'cell-puzzle row-' + ${iter.index + 1} + ' col-' + ${iter2.index + 1}" th:text="${col}"></div>
</th:block>
<div number="0" class="cell-puzzle row-4 col-4 cell-puzzle-zero"></div>
</div>