jQueryを使ったアコーディオンメニューの動作を調整したい

Question

jQueryを使ったアコーディオンメニューを作成したい

jQueryを使ったアコーディオンメニューを作成したいと思い、以下のコードまでは書きました。
PCの時には常時表示し、SPの時にアコーディオンメニューで開くようにしたいです。
２つ以上のアコーディオンメニューを作成し、開く白いボックスをクリックすると全てのメニューが開いてしまいます。
クリックされたメニューのみを開くようにしたいです。
1つづつクリックしていけば、全部が開いた状態で見えるというのが理想です。

※画像はのせてないので、ある程でお願いします…
PCとSPでそれぞれ画像を貼り付けているのも、個人的には気になっていますが
場所がずれてしまうため、今の方法になっています。

どなたかお詳しい方、よろしくお願い致します。

該当のソースコード

`これを複数作成して、それぞれクリックして動くようにしたいです`

<div class="table table__text">
  <div class="accordion">
   ここを開く
  </div>
  <a class="menu__item__link js-menu__item__link"></a>

  <img class="table__img menu delate" src="/assets/img/items/table__item.png" alt="厚み/サイズ">
  <table class="table__items menu">
    <tr class="line">
       <td><img class="table__img menu" src="/assets/img/items/table__item.png" alt="厚み/サイズ"></td>
       <th>ダミー</th>
       <th></th>
       <th></th>
       <th></th>
       <th></th>                            
       <th></th>                   
     </tr>                          
     <tr class="row">
       <th></th>                             
       <td></td>                             
       <td></td>                             
       <td></td>                             
       <td></td>                             
       <td></td>                             
       <td></td>                             
     </tr>                                                  
     <tr class="row">                              
       <th></th>                             
       <td></td>                             
       <td></td>                             
       <td></td>                             
       <td></td>                             
       <td></td>                             
       <td></td>                                
     </tr>                           
     <tr class="row">                              
       <th></th>                             
       <td></td>                             
       <td></td>                             
       <td></td>                             
       <td></td>                             
       <td></td>                             
       <td></td>                                
     </tr>                          
     <tr class="row">                              
       <th></th>                             
       <td></td>                             
       <td></td>                             
       <td></td>                             
       <td></td>                             
       <td></td>                             
       <td></td>                                
     </tr>                           
   </table>
</div>

.table {
    position: relative;
}
.accordion {
    display: none;
}
.table__text a.menu__item__link {
    display: none;
}
.table img {
    position: absolute;
    top: 9px;
    left: 10px;
    height: 50px;
}
.table table.menu {
    text-align: center;
    background-color: #f7f7f7;
    display: block;
    padding: 50px 35px 35px 35px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
table.menu tr.row th {
    border: 1px solid;
    border-left: 0;
    border-bottom: 0;
    min-width: 4.1vw;
    font-weight: lighter;
}
table.menu tr.row td {
    border: 1px solid;
    border-bottom: 0;
    border-right: 0;
    padding: 2.5% 6%;
    background-color: #fff;
}
table.menu tr.line th {
    border: 1px solid;
    border-top: 0;
    border-right: 0;
    font-weight: lighter;
    min-width: 6.1vw;
    padding: 0 0.5vw;
}
@media screen and (min-width: 1200px) {
  .table table.menu tr.row th {
      min-width: 50px;
  }
  table.menu tr.line th {
      min-width: 74px;
  }
}
@media screen and (max-width: 767px) {
 .accordion {
     display: block;
     background: #f7f7f7;
     padding: 1rem;
     text-align: center;
 }
　a.menu__item__link {
    display: block;
    padding: 2rem;
    border: 1px solid #000109;
    width: 100%;
    height: 0;
    position: relative;
　}
　.table img {
    position: unset;
　}
 .table img.delate {
    display: none;
　}
　.table table.menu {
    width: 100%;
    display: none;
　}
}

$(document).ready(function(){
    $(".js-menu__item__link").click(function(){
      $(".menu").next().slideToggle(300);
    });
});

試したこと

クリックしたときに、追加でクラスを指定してという書き方も試しましたが
自分ではうまく行きませんでした。

Answer 1

$(document).ready(function(){
    $(".js-menu__item__link").click(function(){
      $(".menu").next().slideToggle(300);
    });
});

$(".menu").next()だと.menuのクラスがついている次の要素全てが反応するため
$(this)に変えて、それだと<img>のみが開いてしまうので.next().next()にすると
表ごと表示することができました。