Bootstrap nested tabs inside loop

I want to use the post titles for the outer tabs (I have this working fine) and the inner tabs should be the content of that post, but I can’t click through the inner tabs. Can anyone tell me what I’m doing wrong.

<div class="tab-content" id="outer">

    <!-- Outer Tabs -->
    <?php
    $counter = 0;
    $loop = new WP_Query( array( 'post_type' => 'house_type', 'posts_per_page' => -1 ) );
    while ( $loop->have_posts() ) : $loop->the_post();
        $counter++;
    ?>

  <div class="tab-pane <?=($counter == 1) ? 'active': ''?>" id="<?php print strtolower(get_the_title()); ?>">

     <div id="spec-tabs" class="white clearfix">

      <!-- inner tabs -->
      <ul class="nav nav-tabs dark-grey" role="tablist"  id="inner">

          <li role="presentation" class="active"><a href="#general" aria-controls="home" role="tab" data-toggle="tab">Overview</a></li>
          <li role="presentation"><a href="#kitchen" aria-controls="profile" role="tab" data-toggle="tab">Floor Plans</a></li>
          <li role="presentation"><a href="#bathroom" aria-controls="messages" role="tab" data-toggle="tab">Specification</a></li>

        </ul>

        <!-- Inner Tab panes -->
        <div class="tab-content clearfix" id="inner">
        <div role="tabpanel" class="tab-pane fade in active clearfix" id="general">
            <p>General Text</p>
        </div>

        <div role="tabpanel" class="tab-pane fade in  clearfix" id="floorplan">
            <p>Floorplan Text</p>
        </div>

       <div role="tabpanel" class="tab-pane fade in  clearfix" id="specs">
            <p>Specification Text</p>
       </div>
       </div>
    </div>
  </div>             

<?php endwhile;
wp_reset_postdata();?>
</div>