Jquery 单击手柄隐藏/显示按钮时出现问题

我试图从JSON中获取详细信息，并获得了成功，但当我试图在默认情况下隐藏phone number元素并使用onclick按钮显示时，它只适用于第一个Doctor DIV，而不是所有DIV

我想在默认情况下隐藏电话号码，并通过用户onclick按钮显示它

      <div class="page-wrap">
    <h1>Handlebars Tutorial</h1>
    <div id="docs-container"></div>
  </div>

  <script id="docsTemplate" type="text/x-handlebars-template">
  {{#each doctors}}
    <div class="pet">
      <div class="photo-column">
        <img src="{{Image}}">
      </div>
      <div class="info-column">
        <h2>{{DoctorName}}</h2>
  <p>Designation: {{Qualification}}</p>
        <p id="tohide">Phone: {{Phone}}</p>
      </div>
    </div>
  {{/each}}
  </script>

车把教程
{{{每位医生}
{{DoctorName}}
名称：{{资格}

电话：{{Phone}

{{/每个}}

---

我怎样才能做到这一点？这是我的小提琴，我正试图用它来实现。我在你的代码中没有看到任何按钮。请参见此示例，您可以对其进行修改

$('.btn_phn').on('click', function(){
    $(this).prev('.tohide').show();
})

---

单击按钮后，我用show phone元素更新了代码。但问题是它揭示了所有的手机元素，而不是一个医生分区。这里是更新的小提琴链接[link]