html - how to continuously click on button to show next element in javascript

Question

I currently have a bootstrap table with 3 hidden rows. I have a button that I want to click to show the row. I have this working but I want to add functionality so that when i click that button again the next row shows and click it one more time and the third hidden row shows. Is it possible to do this based off this function?

 <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>

$(function () {
        $("#crtbtn").on('click', function () {
            $("#row5").show();

        });
    });

Answer 1

Something like this would do the job:

$(function () {
  const alltrs=$("#container tr").hide();
  $("#crtbtn" ).click(ev=>alltrs.filter(':hidden:first').show());
  $('#hideall').click(ev=>alltrs.hide());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="crtbtn">show more</button>
<button id="hideall">hide all again</button>
<table id="container">
    <tr class = "r5" id = "r5">
      <th data-field="#">5</th>
      <td class = "An5">Announcement 5</td>
    </tr>
    <tr class = "r6">
      <th data-field="#">6</th>
      <td class = "An6">Announcement 6</td>
    </tr>
    <tr class = "r7">
      <th data-field="#">7</th>
      <td class = "An7">Announcement 7</td>
    </tr>
</table>