如何将jquery映射到thymeleaf中的每个引导模式？

我有下面的场景

<script>
  $(document).ready(function (){
        $("#inputText").hide();
        $("#checkboxId").click(function (){
            $("#div1").toggle("slow");
            $("#div2").toggle("slow");
            $("#div3").toggle("slow");
            $("#div4").toggle("slow");
            $("#div5").toggle("slow");
        });
   });

$（文档）.ready（函数（）{
$（“#输入文本”）.hide（）；
$（“#checkboxId”）。单击（函数（）{
$（“#div1”）。切换（“慢速”）；
$（“#div2”）。切换（“慢速”）；
$（“#div3”）。切换（“慢速”）；
$（“#div4”）。切换（“慢速”）；
$（“#div5”）。切换（“慢速”）；
});
});

页面有如下引导模式

<div th:each="item : ${itemList}" class="row mt-1" style="margin-bottom: 20px">
   <div class="col-sm-8">
     <button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#myModal"
                            th:attrappend="data-target=${item.getItemName()}">Update</button>

     <div class="modal fade" id="myModal" role="dialog" th:attrappend="id=${item.getItemName()}">
                        <div class="modal-dialog">

                            <!-- Modal content-->
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">&times; 
                                     </button>
                                    <h4 class="modal-title" th:text="${job.getJobName()}"></h4>
                                </div>
                                <div class="modal-body">
                                    <form th:action="@{/action/__${item.getItemName()}__}" 
                                                 th:object="${timer}" method=post>
                                       <div><input type = "checkbox" id="checkboxId" 
                                             name="checkboxId/> </div>
                                       <div id="div1"><input type = "text" id="checkboxId" 
                                             name="checkboxId/> </div>
                                       <div id="div2"><input type = "text" id="checkboxId" 
                                             name="checkboxId/> </div>
                                       <div id="div3"><input type = "text" id="checkboxId" 
                                             name="checkboxId/> </div>
                                       <div id="div4"><input type = "text" id="checkboxId" 
                                             name="checkboxId/> </div
                                       <div id="div5"><input type = "text" id="checkboxId" 
                                             name="checkboxId/> </div
                                    </form>
                              </div>
                          </div>
              </div>

   </div>
   

更新
&时代；
经过这么多的努力，我终于找到了一个解决方案，它不需要任何函数调用或服务器交互

我将jQuery脚本修改到下面，它运行得非常好

   <script th:inline="javascript">
    $(document).ready(function (){
        $("#checkBoxId").click(function (){
            var modalId = $(this).closest("div .modal").attr('id');
            $('#'+modalId).find("#div1").toggle("slow");
            $('#'+modalId).find("#ddiv2").toggle("slow");
            $('#'+modalId).find("#div3").toggle("slow");
            $('#'+modalId).find("#div4").toggle("slow");
            $('#'+modalId).find("#inputText").toggle("slow");
        });
    });
  </script>

在我的情况下，它是输入文本

希望对你有帮助

PS：这是我的第一篇文章。
如果要在列表中呈现元素，您需要为元素提供唯一的ID。看到这个：Hi@Metroids谢谢你的回复，因为我正在使用“th:attrappned”动态地为每个模型和按钮设置id（它在运行时替换id中的值），所以不同数据的填充工作正常，但我只有jquery有问题，它只在列表中的第一个模式上工作，在其余的模式上不适用。
    .initialHiddenElementClass{
          display : none;
     }