Thymeleaf modal data-target and id update in the loop - spring-boot

Question

I'm building a Thymeleaf+SpringBoot application and I have a moment with Thymeleaf foreach loop where I have a modal inside one div - it repeats few times and I want to update index of a modal and the button which shows it so that my modal will be shown by particular button. I have an issue with updating index because when I do it then my button stop to work and no modal is shown...
I checked:
a) How can I do data-target="#userId" in thymeleaf
b) using data-* attribute with thymeleaf
but still it does not work...
here is part of the code:
The loop:
<div th:each="myth : ${allMyths}">
here is button (commented code also does not work...):
<button type="button" class="button" style="float: right; margin-right: 2%" data-toggle="modal"
data-th-target="'#'+${myth.getId()}">More...
<!--th:attr="data-target='#'+${myth.getId()}">More...-->
</button>
and here is top of the modal:
<div data-th-id="${myth.getId()}" class="modal fade" role="dialog">
here also th:id does not work...
Do you have any idea why button and modal does not find each other by ID?
Thanks in advance for your answers/suggestions!
Piotr

Answer 1

Button:
<button type="button" class="button" style="float: right; margin-right: 2%" data-toggle="modal" th:attr="data-target='#'+${myth.getId()}">More...</button>
Top of the Modal:
<div th:attr="id=${myth.getId()}" class="modal fade" role="dialog">

Answer 2

Here is how it works in my Spring book app + thymeleaf views:
<tbody>
<tr th:each="stockItem,index :${stock}">
<td th:text="${stockItem.id}"></td>
<td th:text="${stockItem.productName}"></td>
<td th:text="${stockItem.productPrice}"></td>
<td th:text="${stockItem.productQuantity}"></td>
<td>
<a class="btn btn-danger" role="button"
th:href="#{/stock/removeAll/{id}(id=${stockItem.id})}">
Remove all
</a>
<br>
<a data-target="#removeSetStockQuantityModal" data-toggle="modal"
th:attrappend="data-target=${stockItem.id}" class="btn btn-danger" role="button">Set Quantity</a>
<!-- Modal -->
<div class="modal fade" id="removeSetStockQuantityModal"
th:attrappend="id=${stockItem.id}" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete <span
th:text="${stockItem.productName}"></span></h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="#" method="get"
th:action="#{/stock/delete}"
th:object="${stockItem}">
<input hidden name="id" th:value="${stockItem.id}"/>
<label th:for="${stockProduct.productQuantity}">
<input type="number"
placeholder="Enter quantity to delete" th:default="0"
th:field="${stockProduct.productQuantity}"/>
</label>
<input type="submit" class="btn btn-danger" value="Delete"/>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Cancel
</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>