jquery在thymeleaf循环的按钮元素中不能直接用id选择器

html页面中作为分页页码的按钮元素是写在thymeleaf定义的循环里的，代码如下：

<li th:each="p:${page.navigatepageNums}">
    <button class="btn btn-default" id="pn" th:text="${p}"></button>
</li>

使用id选择器绑定点击事件， 点击数字时可以跳转页面，代码如下：

$("#pn").click(function (){
        $("#pageNum").val($(this).html());
        $("#query").submit();
    });

然而，结果只有“1”可以点，其他数字都点不动。将选择器换成元素选择器之后就可以了：

$("button[id='pn']".click(function (){
        $("#pageNum").val($(this).html());
        $("#query").submit();
    });

这两种选择器可能存在某种区别，具体是什么还没搞清楚。