Home>

I'm having trouble implementing jQuery.
I would appreciate it if you could help me.

Thank you.

There are 3 buttons (MORE), and when you click it, it will move as a slide toggle.
However, I'm in trouble because only the first button responds.

Applicable source code
        
            
              
                more
              
            
          <table>
            <th>Orderer</th>
          </table>
          
          
            
              
                more
              
            
          <table>
            <th>Orderer</th>
          </table>
          
          
            
              
                more
              
            
          <table>
            <th>Orderer</th>
          </table>
        
$(function () {
  $('#more').on('click', function () {
    $(this).parent('.year-box').next('table').slideToggle();
  });
});
#more {
  display: inline;
  background-color: #231815;
  color: #fff;
  padding: 0px 20px 2px;
  font-family: $mincho;
  cursor: pointer;
}
#more:hover {
  opacity:0.8;
}
.year {
  padding-left: 10px;
  display: inline-block;
  padding-bottom: 5px;
  margin-right: 7px;
}
.year-box {
  border-bottom: 2px solid #4d4d4d;
  margin-bottom: 15px;
}
table {
  display: none;
}
What I tried

I tried changing jQuery but it didn't work.

$(function () {
  $('#more').on('click', function () {
    $(this).parent('.year-box').parent('.company__box').children('table').slideToggle();
  });
});
Supplementary information (FW/tool ​​version, etc.)

jQuery link

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Please provide more detailed information here.