Javascript 单击时仅切换一个按钮

页面上有多个按钮。单击时，会触发所有按钮

只制作一个按钮，该按钮位于单击的按钮中，并且与

“详细信息”，点击触发

页面上的相同按钮：

jQuery(function($) {
  $(document).ready(function() {
    $('#bttn > button').click(function() {
      $('.details').toggle("fast");

    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bttn" style="text-align: center;"><button class="orange-button">Show details</button></div>`

<div>
  <p class="details" id="abc" style="text-align: center;color:grey;padding:1em;background-color:white;margin:5px;display:none;">info@thithi.com</p>
</div>

jQuery（函数（$）{
$（文档）.ready（函数（）{
$（'#bttn>按钮'）。单击（函数（）{
$（'.details'）。切换（“快速”）；
});
});
});
显示细节`
info@thithi.com

对于这种html结构，应该像这样导航并找到相应的

。详细信息

：

jQuery（函数（$）{
$（文档）.ready（函数（）{
$（'#bttn>按钮'）。单击（函数（）{
//更改代码
$（this.parent（）.next（）.find（'.details'）.toggle（“fast”）；
});
});
});

显示细节`
info@thithi.com
您需要在要显示详细信息的按钮上指定一个
id
。为该按钮指定一个
unique
，然后忘记其他按钮。你昨天也问了同样的问题-我提出了同样的建议，我不确定你为什么不想给该按钮指定一个
id
。@我一直尝试过你的建议，但没有效果。同样有10个按钮具有相同的id。id必须是每个都是独一无二的。使用相同的
id
编码不是一个好的做法，您会遇到很多问题。