アコーディオンメニューをクリックする度に1ずつ「+」と「-」を切り替えたい

Question

アコーディオンメニューをクリックする度に、「+」と「-」を切り替えたいです。
クリックしたメニューのみ切り替えたいのですが、全てのメニューが切り替わってしまいます。
どこが間違っているのか、ご教授お願い致します。

<section class="question" id="question-section">
  <h1>よくある質問</h1>
  <div class="list">
    <div class="list-color">
      <p>Q1:　質問</p>
      <p class="plus"></p>
    </div><!--list-color-->
    <div class="answer">
      <p>A: 回答</p>
    </div>
  </div><!--list-->
  <div class="list">
    <div class="list-color">
      <p>Q2:　質問</p>
      <p class="plus"></p>
    </div><!--list-color-->
    <div class="answer">
      <p>A：回答</p>
    </div>

  </div><!--list-->
  <div class="list">
    <div class="list-color">
      <p>Q3:　質問</p>
      <p class="plus"></p>
    </div><!--list-color-->
    <div class="answer">
      <p>A：回答</p>
    </div>

  </div><!--list-->
  <div class="list">
    <div class="list-color">
      <p>Q4:　質問</p>
      <p class="plus"></p>
    </div><!--list-color-->
    <div class="answer">
      <p>A：回答</p>
    </div>
  </div><!--list-->
  <div class="list">
    <div class="list-color">
      <p>Q5:　質問</p>
      <p class="plus"></p>
    </div><!--list-color-->
    <div class="answer">
      <p>A：回答</p>
    </div>

  </div><!--list-->
  <div class="list">
    <div class="list-color">
      <p>Q6:　質問</p>
      <p class="plus"></p>
    </div><!--list-color-->
    <div class="answer">
      <p>A：回答</p>
    </div>

  </div><!--list-->
</section>

/*質問*/
.question {
  width: 100%;
  margin: 0 auto;
}
.list {
  display: block;
  margin: 0 auto;
  width: 50%;
}
.list p {
  font-size: 20px;
}
.list:hover {
  cursor: pointer;
}
.list-color  {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: #cdd4a0;
  margin-bottom: 10px;
  padding: 20px 30px;
  color: #394100;
}
.answer {
  margin-bottom: 20px;
  background-color: #fdf7eb;
  width: 100%;
  padding: 20px 30px;
  display: none;
}
.answer p{
  font-size: 17px;
  line-height: 1.8;
}
.plus::before {
  content: "+";
}
.plus.open::before {
  content: "-";
}

/*アコーディオンメニュー*/
$(function(){
  $('.list-color').click(function(){
    $(this).next().slideToggle();
  })
})
$('.list-color').on('click', function () {
  $('.plus').toggleClass('open');
});

Answer 1

$(this).find('.plus').toggleClass('open');

Comments

[azaz_wb]

早いご回答ありがとうございました。
findをどういった時に使用するのか理解できていなかったので、勉強し直そうと思います。