title: Load Data into Dynamically created Tabs using jQuery AJAX and PHP
body: <p>My situation is as follows:</p>
  
  <p>PHP script retrieves data from a database. This information is shown in the first tab. This tab will always stand and can not be closed. This is fine, see me code.</p>
  
  <pre><code>try {
  
  print '
      &lt;div class="clientTabs"&gt;
          &lt;ul class="nav nav-tabs" id="navTabs"&gt;
              &lt;li class="active" id="li0"&gt;&lt;a href="#client0" role="tab" data-toggle="tab"&gt;Alle clienten&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;';
  
  $selectTabbladen = $gebruiker_data-&gt;runQuery("SELECT * FROM clients  ORDER BY clients_id");
  
  if (!$selectTabbladen-&gt;execute()) return false;
  
  if ($selectTabbladen-&gt;rowCount() &gt; 0) {
  
  print '
  &lt;div class="tab-content" id="tabContent"&gt;
      &lt;div id="client0" class="tab-pane active"&gt;
          &lt;div class="bootstrap-table"&gt;
              &lt;div class="fixed-table-toolbar"&gt;
                  &lt;div class="bars pull-left"&gt;
                      &lt;button id="btnTabdel" class="btn btn-danger btn-labeled" disabled="disabled"&gt;Vervijderen&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;table class="table table-bordered" id="table"
              data-toolbar="#toolbar"
              data-search="true"
              data-show-refresh="true"
              data-show-toggle="false"
              data-show-columns="true"
              data-show-export="true"
              data-detail-view="true"
              data-detail-formatter="detailFormatter"
              data-pagination="true"
              data-id-field="id"
              data-minimum-count-columns="2"
              data-page-list="[10, 25, 50, 100, ALL]"
              data-show-footer="false"&gt;
  
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th class="text-center" width="1"&gt;#&lt;/th&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;Address&lt;/th&gt;
                      &lt;th&gt;Zip&lt;/th&gt;
                      &lt;th&gt;City&lt;/th&gt;
                      &lt;th&gt;Tel.&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;';                       
  
              while($aRow = $selectTabbladen-&gt;fetch(PDO::FETCH_ASSOC)) {
  
                  $id = $aRow['clients_id'];
                  $name= $aRow['name'];
                  $adress= $aRow['address'];
                  $zip= $aRow['zip'];
                  $city= $aRow['city'];
                  $tel= $aRow['tel'];
  
                  print '&lt;tr class="tabData" id="'.$id.'"&gt;
                      &lt;td&gt;
                          &lt;label class="cr-styled"&gt;
                              &lt;input type="checkbox" ng-model="todo" class="tabID" value="'.$id.'"/&gt;
                              &lt;i class="fa"&gt;&lt;/i&gt;
                          &lt;/label&gt;
                      &lt;/td&gt;
                      &lt;td&gt;'.$name.'&lt;/td&gt;
                      &lt;td&gt;'.$address.'&lt;/td&gt;
                      &lt;td&gt;'.$zip.'&lt;/td&gt;
                      &lt;td&gt;'.$city.'&lt;/td&gt;
                      &lt;td&gt;'.$tel.'&lt;/td&gt;
                      &lt;/tr&gt;';
                  }
  </code></pre>
  
  <p>Double-click creates a dynamic tab that retrieve other data from the database associated with this ID. This is also good, a new TAB is created and the data retrieved.</p>
  
  <pre><code>    //Tabs
  $('body').on('dblclick', '.tabData', function () {
      var tab_id = $(this).attr("id");
      addTab(tab_id);
  });
  
  function addTab(tab_id) {
      // If tab already exist in the list, return
      if ($("#li"+tab_id).length != 0) {
          $("#navTabs li").removeClass("active");
          $("#client0").removeClass("active");
          $("#li"+tab_id).addClass("active");
          $("#client"+tab_id).addClass('active').show();
          //return;
      } else {
          $("#navTabs li").removeClass("active");
          $("#client0").removeClass("active");
  
          // add new tab and related content
          $('ul#navTabs li:last-child').after('&lt;li class="active" id="li' + (tab_id) + '"&gt;&lt;a href="#client' + (tab_id) + '" role="tab" data-toggle="tab"&gt;Client ' + (tab_id) + ' &lt;button type="button" class="btn btn-warning btn-xs" onclick="removeTab(' + (tab_id) + ');"&gt;&lt;i class="fa fa-remove"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/a&gt;');
  
          loadClientData(tab_id);
  //$('div#tabContent div:last-child').after('&lt;div class="tab-pane" id="client' + (tab_id) + '"&gt;&lt;p&gt;Content tab ' + (tab_id) + '&lt;/p&gt;&lt;/div&gt;');
  
          // set the newly added tab as current
          $("#client"+tab_id).addClass('active').show();
      }
  }
  
  function loadClientData(tab_id) {
      $("#tabContent").empty();
      $.ajax({
          type: "GET",
          url: "clienten_data_load.php?id='+tab_id",
  
          success: function(data) {
              //empty(data);
              $("#tabContent").text(data);
  
          }
      });
  }
  </code></pre>
  
  <p>});</p>
  
  <p>From here it goes wrong and I do not know how to solve this.</p>
  
  <p>If I go back to the first TAB after first created dynamic tab, then this contains same data as the dynamically created tab.</p>
  
  <p>What am I trying to do:</p>
  
  <p>First tab: Provides an overview of all clients with a number of client data.</p>
  
  <p>Dynamic tabs: There will be a maximum of 10 tabs. Each double click creates a dynamic tab to maximum of 10. The contents of the tab have to be all other client data associated with the corresponding ID.</p>
  
  <p>How can I make sure that an additional tab is created with each double click without replacing the contents of other tabs?</p>
  
  <p>Hope I explained it clearly.</p>