Bootstrap 3 вкладки Данные отображаются только на первой вкладке

Я использую вкладки Bootstrap 3 и аккордеон на вкладках.Bootstrap 3 вкладки Данные отображаются только на первой вкладке

HTML, я в настоящее время выглядит следующим образом:

<ul class="nav nav-tabs" role="tablist"> 
     <li role="presentation" class="active"><a href="#1270013" aria-controls="#1270013" role="tab" data-toggle="tab">DF</a></li> 
     <li role="presentation"><a href="#1270015" aria-controls="#1270015" role="tab" data-toggle="tab">HWR</a></li> 
    </ul> 
    <div class="tab-content"> 
     <div role="tabpanel" class="tab-panel active" id="1270013"> 
      <div class="panel-group" id="accordion3" role="tablist" aria-multiselectable="true"> 
       <div class="panel panel-default"> 
        <div class="panel-heading" role="tab" id="heading30"> 
         <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapse30" aria-expanded="true" aria-control="collapse30">2015-10-14 13:36:34</a></h4> 
        </div> 
        <div id="collapse30" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading30"> 
         <div class="panel-body"> 
          ... 
         </div> 
        </div> 
       </div> 
       <div class="panel panel-default"> 
        <div class="panel-heading" role="tab" id="heading31"> 
         <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapse31" aria-expanded="true" aria-control="collapse31">2015-10-14 11:46:26</a></h4> 
        </div> 
        <div id="collapse31" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading31"> 
         <div class="panel-body"> 
         ... 
         </div> 
        </div> 
       </div> 
       <div class="panel panel-default"> 
        <div class="panel-heading" role="tab" id="heading31"> 
         <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapse31" aria-expanded="true" aria-control="collapse31">2015-10-14 11:46:26</a></h4> 
        </div> 
        <div id="collapse31" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading31"> 
         <div class="panel-body"> 
          ... 
         </div> 
        </div> 
       </div> 
       <div class="panel panel-default"> 
        <div class="panel-heading" role="tab" id="heading32"> 
         <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapse32" aria-expanded="true" aria-control="collapse32">2015-10-14 09:56:14</a></h4> 
        </div> 
        <div id="collapse32" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading32"> 
         <div class="panel-body"> 
          ... 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div role="tabpanel" class="tab-panel" id="1270015"> 
      <div class="panel-group" id="accordion5" role="tablist" aria-multiselectable="true"> 
       <div class="panel panel-default"> 
        <div class="panel-heading" role="tab" id="heading50"> 
         <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion5" href="#collapse50" aria-expanded="true" aria-control="collapse50">2015-10-14 14:08:31</a></h4> 
        </div> 
        <div id="collapse50" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading50"> 
         <div class="panel-body"> 
          ... 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div>

Теперь этот код отображает 2 вкладки выше, но данные из второй вкладки будут показаны ниже первыми данных табла.

Я не могу найти ошибку, которую я сделал, потому что вторая вкладка не будет отображаться на второй вкладке, а не в первой.

Я использую jQuery 1.9.1 и текущую версию Bootstrap 3.

Также у меня нет собственного письменного JavaScript, я работал с тегами данных в HTML.

jsFiddle

источник

2015-10-16 KhorneHoly

добавить код jsfiddle –

@LaljiTadhani обновил свой вопрос с полным рабочим Пример – KhorneHoly