Use one tabbed panel inside another

I'm trying to use one tabbed panel inside another. The problem I am 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 it adds the option to replace.

Tabs implementation code (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've cut the tab code so it does not get too large