Use one tabbed panel inside another

Question

I’m trying to use one tabbed panel inside another. The problem I’m facing is: -From the second tab I select it inserts the option and does not replace Example with images below:

First selection-OK

From the second selection he adds the option inves to replace.

Code for tabs implementation (simplified):

<div class="panel with-nav-tabs panel-primary">
  <div class="tabbable" id="tabs-669585">
    <ul class="nav nav-tabs">
  <li>
      <a href=" #panel-21 " data-toggle="tab">Maio</a>
  </li>
  <li>
      <a href=" #panel-22 " data-toggle="tab">Junho</a>
  </li>
  </div>
</div>
<div class="panel with-nav-tabs panel-success">
  <div class="panel-heading">Atividade</div>
  <div class="panel-body">  
    <div class="tab-content">
      <div class="tab-pane" id="panel-21">
        ...(código das abas)
      </div>
    </div>
    <div class="tab-content">
      <div class="tab-pane" id="panel-22">
        ...(código das abas)
      </div>
    </div>
  </div>
</div>

NOTE: I cut the code of the tabs so it doesn’t get too long