JavaScript doesn't work in Thymeleaf. In Spring Boot Thymeleaf, first thing can open modal.

but second, third ... things can not open modal.

every thing has a className. but only first thing can open modal.

I think JavaScript works only the first thing, and doesn't work other things.

<tr th:each="board, i : ${boards}">
                        <th scope="row" th:text="${i.count}">1</th>
                        <td>
                            <p id="show" th:text="${board.title}">Title</p>
                            <div class="modal"> .... </modal>
                        </td>
                        <td th:text="${board.writer}">이재윤</td>
                        <td th:text="${board.createDate}">2022-02-01</td></p>
</tr>

js

function show() {
    document.querySelector(".background").className = "background show";
}

function close() {
    document.querySelector(".background").className = "background";
}

document.querySelector("#show").addEventListener("click", show);
document.querySelector("#close").addEventListener("click", close);