jquery - jstl forEach ループに入れると jQuery Effects が機能しない

Question

jQuery アコーディオンを使用して、JSP で質問のリストを表示しました。アコーディオン内には、ユーザーが実行できる 2 つの操作、削除/更新があります。質問が削除できない場合 (想定)、削除記号の代わりにロック記号が表示されます。ロック シンボルには、ロックされている理由を示す jQuery ツールチップがあります。私の問題は、ツールチップのスタイリングが最初のアコーディオンに対してのみ表示されることです。2 番目のアコーディオンからは、テキストのみが表示され、スタイリングは表示されません。（スタックオーバーフローで許可されていないため、スクリーンショットを添付できません）

インスペクト要素を実行すると、スタイリング クラスが 2 番目のアコーディオン以降にアタッチされていないことがわかります。アコーディオンは JSTL foreach ループで表示されます。私は jQuery にあまり詳しくないので、これらの問題をすべて自分で解決できるわけではないので、google/stackoverflow 検索文字列がどうあるべきかわかりません。どんな助けでも大歓迎です。

<script>
    $(function() {
        $("#accordion").accordion( {
            collapsible : true
        });
    });
</script>
<script>
    $(function() {
        $( "#locked" ).tooltip();
    });
</script>

<div id="accordion">

<c:forEach items="${sessionScope.questionList}" var="question">
     <c:choose>
        <c:when test="${question.state eq 'locked'}">
          <div class="editModify">
             <img src="static/images/Locked.png" style="width: 25px; height: 25px;"
            title="This question cannot be Modified since it is being used in question paper/s" id="locked"></img>
          </div>
        </c:when>
        <c:otherwise>
        Display links to edit and delete.
        </c:otherwise>
    </c:choose>
</c:forEach>
</div>

さらにコードを提供する必要がある場合はお知らせください。私の JSP は大きすぎるため、toolTip が存在する部分だけを貼り付けました。