Jquery 引导多模态触发右模态

我的应用程序中有一个页面，其中有一个引导模式与出现的每个记录关联。使用当前设置，我能够触发模式，但它仅触发页面上的第一个模式，而不是正确关联的模式。我在StackOverflow上尝试了一些答案，这些答案在一个页面上处理了多个模态，但它们对我不起作用

以下是触发模式的链接：

<td>
    <a href="#" data-toggle="modal" data-target="#comment-modal" data-actual="{{this.documentRequestIdHash}}" id="record-comment-link">
        {{this.document_request_comments.length}} 
        <span class="fas fa-comment text-primary mr-2"></span>
    </a>
</td>

<!-- Comment Modal -->
<div class="modal fade" id="comment-modal" tabindex="-1" role="dialog" aria-labelledby="commentModelLabel" aria-hidden="true">
...
</div>

这是我尝试的jQuery，但遇到了一个错误

未捕获的TypeError:$（…）。modal不是一个函数

：

$('#record-comment-link').on('click', function(){
    var commentModal = $(this).attr('data-actual');
    $(commentModal).modal("show");
  })

---

行：

var commentModal=$（this.attr（'data-actual'）

为commentModel提供

{{this.documentRequestIdHash}}

的值。假设该值为“modelComment1”。 然后是一行：

$（commentModal）.modal（“show”）查找标记为“modelComment1”的任何对象，但找不到该对象。
要修复它，请将模式html更改为

<div class="modal fade" id="{{this.documentRequestIdHash}}" tabindex="-1" role="dialog" aria-labelledby="commentModelLabel" aria-hidden="true">
...
</div>

这应该可以了
嘿，谢谢你的评论。我尝试了您的建议，但仍然收到错误，
uncaughttypeerror:$（…）。modal不是函数
您是否在jquery.js之前添加了bootstrap.js。这也可能导致此错误。这就是问题所在。这么简单的错误。谢谢你提醒我。
$("#" + commentModal).modal("show");