Divs open everything together, how to solve

Question

Good morning, I have the following problem, I use list foreach to bring the results of the comic into a list, and I want when I click on a list item, a div hidden appears below the respective item with the available options, which applies to all other items in the list, I am using jQuery with event click to accomplish this, in case show and hide the options using 2 display options, the problem is that the lists use one class, and the options box uses another, but like this in foreach the classes are repeated, then when I click on an item in the list displays the options of all others, and when clicking again hides all, as I do to restrict each div to his own li by jQuery, follows code.

$(document).ready(function(){
  $('.item').click(function(){
    if($('.opcoes').hasClass('display_off')){
      $('.opcoes').removeClass('display_off');
      $('.opcoes').addClass('display_on');
    }else{
      $('.opcoes').removeClass('display_on');
      $('.opcoes').addClass('display_off');
    }
  })
})

.item{
  display:flex;
  border:1px solid;
  cursor:pointer;
}
.display_off{
  display:none;
}
.display_on{
  display:flex;
}
.opcoes{
  height:100px;
  border:1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<ul>
  <li class="item">item da lista</li>
  <div class="opcoes display_off">
    <!--opcoes na div-->
  </div>
  <li class="item">item da lista</li>
  <div class="opcoes display_off">
    <!--opcoes na div-->
  </div>
</ul>

what I need and that each item on the list opens your div options.

Answer 1

You can do this with the next jquery

$(document).ready(function(){
  $('.item').click(function(){
    var $opcoes = $(this).next('.opcoes');

    if($opcoes.hasClass('display_off')){
      $opcoes.removeClass('display_off');
      $opcoes.addClass('display_on');
    }else{
      $opcoes.removeClass('display_on');
      $opcoes.addClass('display_off');
    }
  })
})