Проблема с jQuery .parent()

$("thead").on("click", function() { 
  t = $(this).parent("table").find("tbody").eq($(this).index($("thead"))); 
  if (t.css('display') == 'block') { 
    t.css("display", "none"); 
  } else { 
    t.css("display", "block"); 
  } 
});

<table class="maintable"> 
  <thead> 
    <th class="title_team">GroupName 1</th> 
  </thead> 
  <tbody> 
    <tr> 
      <td>John Travolta travolta837@gnail.com +1938174813 
      </td> 
    </tr> 
  </tbody> 
</table> 
<div id="listfilteredcontacts"> 
  <div class="scroll"> 
    <table id="users_list"> 
      <tr> 
        <td class="no-padding"> 
          <table cellspacing="0" cellpadding="0" class="tblTeam"> 
            <thead> 
              <tr> 
                <th class="title_team"> 
                  <i class="fa fa-users" aria-hidden="true"></i> &nbsp;Team Name 
                </th> 
              </tr> 
            </thead> 
            <tbody> 
              <tr v-for="(group, indexgroup) in team.groups"> 
                <td class="no-padding"> 
                  <table cellspacing="0" cellpadding="0" class="maintable"> 
                    <thead> 
                      <tr for="spoiler2"> 
                        <th class="spoiler" colspan="4"> 
                          <i class="fa fa-folder-open" aria-hidden="true"></i> GroupName 2 
                        </th> 
                      </tr> 
                    </thead> 
                    <tbody> 
                      <tr> 
                        <td style="width: 50px; "> 
                          <img src="/static/assets/green_avatar.svg"> 
                        </td> 
                        <td>John Travolta</td> 
                        <td>travolta837@gnail.com</td> 
                        <td>+1938174813</td> 
                      </tr> 
                    </tbody> 
                  </table> 
                </td> 
              </tr> 
            </tbody> 
          </table> 
        </td> 
      </tr> 
    </table> 
  </div> 
</div>