如何连续单击按钮以显示javascript中的下一个元素

我目前有一个包含3个隐藏行的引导表。我有一个按钮，我想点击以显示该行。我有这个工作，但我想添加功能，以便当我再次单击该按钮时，下一行显示并再次单击它，第三个隐藏行显示。是否可以基于此功能执行此操作

 <table id = "mt" class="tableManager-table-bordered"   
  <thead class = "thead-dark">
    <tr>
      <th data-field="#">#</th>
      <th data-field="CurrentAnnouncements">Current Announcements</th>
    </tr>
    </thead>
<tbody>
    <tr class = "row5" id = "row5">
      <th data-field="#">5</th>
      <td class = "An5">Announcement 5</td>

    </tr>
    <tr class = "row6 id ="row6">
      <th data-field="#">6</th>
      <td class = "An6">Announcement 6</td>
    </tr>
    <tr class = "row7" id ="row7">
      <th data-field="#">7</th>
      <td class = "An7">Announcement 7</td>
    </tr>
  </tbody>
</table>


<button  type = "button" id = "crtbtn" class = "CreateAnnouncement">
Create Announcement
</button>

---

像这样的东西可以完成这项工作：

$（函数（）{
const alltrs=$（“#容器tr”）.hide（）；
$（“#crtbtn”）。单击（ev=>alltrs.filter（'：hidden:first'）.show（））；
$（'#hideall'）。单击（ev=>alltrs.hide（））；
});

显示更多
再次隐藏
5.
公告5
6.
公告6
7.
公告7
您只需在最后显示的元素之后显示下一个元素即可-


$（文档）.ready（函数（）{
$（'#table'）.find（'tr'）.slice（1.hide（）；
$（'#按钮'）。在（'单击'，函数（）上）{
$（'#table'）.find（'tr:visible'）.next（）.show（）；
});
});

单位
接触
国家
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
德国
莫特祖马商业中心
张锦松
墨西哥
恩斯特·汉德尔
罗兰·孟德尔
奥地利
岛屿贸易
海伦·贝内特
英国
笑巴克斯酒窖
田纳西
加拿大
马加兹尼营养不良
乔瓦尼·罗维利
意大利
显示
下一行显示时，是否意味着上一行将再次隐藏？你能提供html结构吗？我希望前一个仍然显示。
$(function () {
        $("#crtbtn").on('click', function () {
            $("#row5").show();

        });
    });