Javascript 点击事件时过滤多个div中的链接/内容

我目前正在努力过滤多个框中的多个内容

• 我在顶部有一些与人名相关的链接/按钮
• 我还有一个带有不同div的边栏，从a到D（任意）
• 在那些div中，我在不同的

我想做的基本上是在不同的div（A到D）中只显示您在顶部单击的人。很明显，你可以点击其他人，也可以这样做。目前，第一次点击似乎做了我想要的，但随后的点击没有，一切都消失了

我不知道该怎么办。该项目得到了许多不同类型的过滤，没有给我带来麻烦，但这一个

  <div id="sidebar_wrapper">
<div class="sidebar_nav">
  <div class="name_icon_box">
    <a href="#" class="icon_all" id="icon_all">ALL</a>
    <a href="#" class="henry" id="henry">HENRY</a>
    <a href="#" class="john" id="john">JOHN</a>

<div class="company_box_white box_a">
    <div class="company_box">
      <div class="button-list"><span class="white_letter">A</span><span class="arrow_menu"></span></div>
      <div class="company_box_list">
        <ul class="name_icon">
          <li><a href="#"><p data-key-value="robert">robert</p></a></li>
          <li><a href="#"><p data-key-value="henry">henry</p></a></li>
          <li><a href="#"><p data-key-value="steve">steve</p></a></li>
          <li><a href="#"><p data-key-value="dean">dean</p></a></li>
        </ul>
      </div>
    </div>
  </div>

A.

代码似乎太大，无法按原样发布，这里有一个fiddle链接。

---

提前感谢。

我使用了隐藏和显示以下框中的文本，基于在初始框中单击名称

代码中的一些内容已更正，下面的每个框中将显示匹配的相关名称选择

 if (p_data_value == currentPerson || currentPerson == "icon_all") {
      //$(allBoxArr[index]).find('li').find('p').append(p_content);
      $(this).show();
    } else {
      $(this).hide();
    }

---

您需要函数的原样，还是我们可以修改整个JS代码？