jQuery Effects not working in when put in jstl forEach loop -

i have used jquery accordion display list of questions in jsp. inside accordion there 2 operations user can perform, delete/update. if question not deletable (assume) there lock symbol appears in place of delete symbol. lock symbol has jquery tooltip shows why locked. problem tooltip styling appearing first accordion. second accordion text appears while styling not there. (i unable attach screenshots because stackoverflow not allowing me so)

when inspect element can see styling classes not attached second accordion onwards. accordion displayed in jstl foreach loop. i'm not familiar jquery can solve these problems on own i'm not sure google/stackoverflow search string should be. appreciated.

<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 modified since being used in question paper/s" id="locked"></img>           </div>         </c:when>         <c:otherwise>         display links edit , delete.         </c:otherwise>     </c:choose> </c:foreach> </div> 

please let me know if need give more code. jsp big hence have pasted part tooltip present.