مشكلة استجابة اول عنصر فقط من مجموعة عناصر في جافاسكربت عند النقر

عندي مجموعة عناصر داخل قسم له خاصية 

display:flex

أوجه أمر بأنه عند الضغط على على عنصر ما باستخدام this  يظهر عنصر تالي له ؛ وهذه الاستجابة المفترض أن تتم مع كل عنصر يتم الضغط عليه ولكن المشكلة أنه يستجيب اول عنصر فقط

<div class="div-dots">
   <img src="layout/images/dots.png" id="dots">                                   
   <div class="none" id="div-msg-report">
       <img src="layout/images/msg.png" class="msg-dots" title="msg" data-bs-toggle="offcanvas" data-bs-target="#offcanvasMsg" aria-controls="offcanvasMsg">
       <input type="hidden" id="item" value="$value['item_id']" >
       <input type="hidden" id="user" value="$value['user_id']" >
       <i class="fas fa-flag msg-dots"></i>                                      
   </div>                                     
</div>

$('#dots').click(function(){
  $(this).next().toggle();
});