Using multiple modals linked to th:href

I am trying to generate modals from hrefs:

<ul class="unordered-list" th:each="barOrder : ${OrdersByUser}">
                <li>
                    <a th:href="@{/users/details/{userId}/orderHistory/{orderId}(orderId=${barOrder.orderId}, userId=${billyUserId})}">
                        <div class="grid-orderHistory-parent">
                            <div class="grid-user-child-left"  th:text="${#temporals.format(barOrder.getDateTime(), 'dd-MM-yyyy HH:mm')}"></div>
                            <div class="grid-user-child-left"  th:text="${barOrder.getTotalPriceDisplayString(barOrder.getTotalPrice())}"></div>
                            <div class="grid-user-child-left" th:text="${barOrder.getBartenderName()}"></div>
                        </div>
                    </a>
                </li>
            </ul>

It is for an overview with orderhistory. For every order I want to details to pop up in a modal. So far I tried using JS but with no luck.

TIA