My jquery function is only hidding in table row while i am trying to hide all rows?

This function is fade in and out but only for one row whose id is "AsserRow"

Why it is not working for all rows?

$('#chkTribe').change(function() {
  if (!this.checked) {
    $('#AsserRow').fadeIn('slow');
    $('#FoneRow').fadeIn('slow');
    $('#FtRow').fadeIn('slow');
  } else {
    $('#AsserRow').fadeOut('slow');
    $('#FoneRow').fadeIn('slow');
    $('#FtRow').fadeIn('slow');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" id="chkTribe" name="" value=""> <br/>

Rows that need to be hide,
<table>
  <tr id="AsserRow">
    <td>
      <span style="font-weight:bold">Asserah:</span>
    </td>
  </tr>
  <tr id="FoneRow">
    <td>
      <span style="font-weight:bold">FoneRow:</span>
    </td>
  </tr>
  <tr id="FtRow">
    <td>
      <span style="font-weight:bold">FtRow:</span>
    </td>
  </tr>
</table>