Модельное окно работает только из первой строчки таблицы

Создал модельное окно, которое уточняло подтверждение действия. Так как таблицу заполняю из БД через thymeleaf, то получается, что кнопка из таблицы активна только в первой строчке. условные 2ая, 3ая, etc..кнопки на нажатие не реагируют

Script:

<script>
        $(function () {
        $("#btn2").click(function () {
                $("#myModal2").modal('show');
            });
        });
</script>

Сама таблица:

 <div align="center" th:each="el : ${docks}">
    <table class="table table-active table-striped">
        <tbody class="thead-light">
        <tr>
            <td>
                <p><a href="#myModal2" id="btn2" class="btn btn-danger">X</a></p>
                <div id="myModal2" class="modal fade">
                    <div class="modal-dialog modal-sm">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Подтвердите действия</h4>
                            </div>
                            <div class="modal-body">
                                <th:block th:text="'TestTest ' + ${el.dockNumber}"></th:block>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
                                <button type="button" class="btn btn-primary" >Сохранить изменения</button>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
            <td align="left" th:text="${el.dockNumber}"></td>

JQuery и Bootstrap.min.css - подключены