bootstrap v4 tab nav-item data-toggle not changing tab-pane in if statement

While the nav-item's a class changes to display an active class on click as desired, the tab-pane's active class does not change to reflect the click therefore causing the tabs to not work properly. Using Twitter Bootstrap v4. Help much appreciated. TY!

note: this does work as desired hardcoded(static) without the if statements.

<ul class="roster-list" role="tablist">
        <?php
          $args = array(
            'post_type'      => 'post',
            'cat'            =>  6,
            'order'          => 'DSC'
          );
          query_posts($args);
          if ( have_posts() ) : while ( have_posts() ) : the_post();
          $tabRosterPostID = get_the_ID();
        ?>
        <li class="nav-item">
          <?php
            // This works
            if ($tabRosterPostIDCount == 0) {
              echo "<a class='active' data-toggle='tab' href='#$tabRosterPostID' role='tab'>";
            } else {
              echo "<a class='' data-toggle='tab' href='#$tabRosterPostID' role='tab'>";
            }
            $tabRosterPostIDCount++;
          ?>
            <?php the_post_thumbnail(); ?>
          </a>
        </li>
        <?php
          endwhile; endif;
          wp_reset_query();
        ?>
      </ul>

      <div class="tab-content">
        <?php
          $args = array(
            'post_type'      => 'post',
            'cat'            =>  6,
            'order'          => 'DSC'
          );
          query_posts($args);
          if ( have_posts() ) : while ( have_posts() ) : the_post();
          $tabContentPostID = get_the_ID();
          $rosterBigImage = get_post_meta( get_the_ID(), 'roster-big-image', true );
          $rosterMusicEmbed = get_post_meta( get_the_ID(), 'roster-music-embed', true );

          // This does not work
          if ($tabContentPostIDCount == 0) {
            echo "<div class='tab-pane active' id='$tabContentPostID' role='tabpanel'>";
          } else {
            echo "<div class='tab-pane' id='$tabContentPostID' role='tabpanel'>";
          }
          $tabContentPostIDCount++;
        ?>
          <div class="team-member clearfix">
            <img src="<?php echo $rosterBigImage; ?>">
            <div class="member-copy">
              <?php
                the_title( '<h1>', '</h1>' );
                the_content();
              ?>
              <div class="sounds">
                <?php echo $rosterMusicEmbed; ?>
              </div>
            </div>
          </div>
        </div>
        <?php
          endwhile; endif;
          wp_reset_query();
        ?>
      </div>