title: Manipulating bootstrap tabs, removing and adding tabs with jquery and javascript
body: <p>Im kind of new to this. I would like to add and remove buttons from a tab, however i can't do it properly. It seems fairly simple but i wont work with the new buttons created using javascript. Please help me. Thanks in advance</p>
  <pre><code>
  
  &lt;div class=&quot;col-lg-6 col-sm-6&quot;&gt;
  
  
      &lt;div class=&quot;btn-pref btn-group btn-group-justified btn-group-lg&quot; role=&quot;group&quot; aria-label=&quot;...&quot; id=&quot;dynagregarmarca&quot;&gt;
          &lt;div class=&quot;btn-group&quot; role=&quot;group&quot;&gt;
              &lt;button type=&quot;button&quot; id=&quot;stars&quot; class=&quot;btn btn-primary&quot; href=&quot;#tab1&quot; data-toggle=&quot;tab&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-star&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                  &lt;div class=&quot;hidden-xs&quot;&gt;Stars&lt;/div&gt;
              &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class=&quot;btn-group&quot; role=&quot;group&quot;&gt;
              &lt;button type=&quot;button&quot; id=&quot;favorites&quot; class=&quot;btn btn-default&quot; href=&quot;#tab2&quot; data-toggle=&quot;tab&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-heart&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                  &lt;div class=&quot;hidden-xs&quot;&gt;Favorites&lt;/div&gt;
              &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class=&quot;btn-group&quot; role=&quot;group&quot;&gt;
              &lt;button type=&quot;button&quot; id=&quot;following&quot; class=&quot;btn btn-default&quot; href=&quot;#tab3&quot; data-toggle=&quot;tab&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-user&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                  &lt;div class=&quot;hidden-xs&quot;&gt;Following&lt;/div&gt;
              &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class='btn-group' role='group'&gt;
              &lt;button type='button' id='following' class='btn btn-default' href='#tab3' data-toggle='tab'&gt;&lt;span class='glyphicon glyphicon-user' aria-hidden='true'&gt;&lt;/span&gt;
                  &lt;div class='hidden-xs'&gt;Following&lt;/div&gt;
              &lt;/button&gt;
          &lt;/div&gt;        
      &lt;/div&gt;
  
      &lt;div class=&quot;well&quot;&gt;
        &lt;div class=&quot;tab-content&quot; id=&quot;tabcontent&quot;&gt;
  
          &lt;div class=&quot;tab-pane fade in active&quot; id=&quot;tab1&quot;&gt;
            &lt;h3&gt;This is tab 1&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class=&quot;tab-pane fade in&quot; id=&quot;tab2&quot;&gt;
            &lt;h3&gt;This is tab 2&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class='tab-pane fade in' id='tab3'&gt;
            &lt;h3&gt;This is tab 3&lt;/h3&gt;
          &lt;/div&gt;
  
  
        &lt;/div&gt;
      &lt;/div&gt;
  
  
  &lt;/div&gt;
  
  
  
  &lt;input type=&quot;button&quot; id=&quot;btnagregarmarcatab&quot; value=&quot;Add tab&quot; /&gt;
  
  &lt;input type=&quot;button&quot; id=&quot;btneliminarmarcatab&quot; value=&quot;remove Selected tab&quot; /&gt;
  
  
  &lt;script&gt;
  
  
  
  
  
  $(document).on(&quot;click&quot;, &quot;.btn-pref .btn&quot;, function () {
  
          $(&quot;.btn-pref .btn&quot;).removeClass(&quot;btn-primary&quot;).addClass(&quot;btn-default&quot;);
          $(this).removeClass(&quot;btn-default&quot;).addClass(&quot;btn-primary&quot;);  
  
  });
  
  
  $(document).on(&quot;click&quot;, &quot;#btnagregarmarcatab&quot;, function () {
  
  
      var menu_html = &quot;&lt;div class='btn-group' role='group'&gt;&quot; + 
                              &quot;&lt;button type='button' id='followings' class='btn btn-default' href='#tab3' data-toggle='tab'&gt;&lt;span class='glyphicon glyphicon-user' aria-hidden='true'&gt;&lt;/span&gt;&quot; + 
                              &quot;&lt;div class='hidden-xs'&gt;Following&lt;/div&gt;&quot; + 
                              &quot;&lt;/button&gt;&quot; + 
                      &quot;&lt;/div&gt;&quot;;
  
      var content = &quot;&lt;div class='tab-pane fade in' id='tab3'&gt;&quot; + 
                          &quot;&lt;h3&gt;This is tab 3&lt;/h3&gt;&quot; + 
                      &quot;&lt;/div&gt;&quot;;
  
  
      $(&quot;#dynagregarmarca&quot;).append(menu_html);
      $(&quot;#tabcontent&quot;).append(content);
      
      $(&quot;.btn-pref .btn&quot;).removeClass(&quot;btn-primary&quot;).addClass(&quot;btn-default&quot;);
      $(this).removeClass(&quot;btn-default&quot;).addClass(&quot;btn-primary&quot;);
  
  
  
  });
  
  
  $(document).on(&quot;click&quot;, &quot;#btneliminarmarcatab&quot;, function () {
  
  
      let elementoprimary = $(&quot;.btn-primary&quot;);
  
      $(elementoprimary).parent().remove();
  
  
  
  });
  
  
  &lt;/script&gt;
  
  
  </code></pre>
  <p>It only works removing the default buttons, but it removes everything if I try to remove the created buttons. Please I need some help or advice. Thanks a lot in advance. I need to do it the simple way.</p>