title: Add / Remove Tabs Dynamically in Bootstrap - Make created tab active
body: <p>Here is the snippet to dynamically add / remove bootstrap tabs. Everything works fine, but I would like newly created tab to be active and in focus rather than the tab used to dynamically add a tab.</p>
  
  <p>This is fiddle: <a href="http://jsfiddle.net/isherwood/F33Av/4/">http://jsfiddle.net/isherwood/F33Av/4/</a></p>
  
  <p>And this is code in question: </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;ul class="nav nav-tabs"&gt;
          &lt;li class="active"&gt;&lt;a href="#contact_01" data-toggle="tab"&gt;Joe Smith&lt;/a&gt;&lt;span&gt;x&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#contact_02" data-toggle="tab"&gt;Molly Lewis&lt;/a&gt;&lt;span&gt;x&lt;/span&gt; &lt;/li&gt;
          &lt;li&gt;&lt;a href="#" class="add-contact" data-toggle="tab"&gt;+ Add Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="tab-content"&gt;
          &lt;div class="tab-pane active" id="contact_01"&gt;Contact Form: Joe Smith&lt;/div&gt;
          &lt;div class="tab-pane" id="contact_02"&gt;Contact Form: Molly Lewis&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>$(".nav-tabs").on("click", "a", function(e){
        e.preventDefault();
        $(this).tab('show');
      })
      .on("click", "span", function () {
          var anchor = $(this).siblings('a');
          $(anchor.attr('href')).remove();
          $(this).parent().remove();
          $(".nav-tabs li").children('a').first().click();
      });
  
      $('.add-contact').click(function(e) {
          e.preventDefault();
          var id = $(".nav-tabs").children().length; //think about it ;)
          $(this).closest('li').before('&lt;li&gt;&lt;a href="#contact_'+id+'"&gt;New Tab&lt;/a&gt;&lt;span&gt;x&lt;/span&gt;&lt;/li&gt;');         
          $('.tab-content').append('&lt;div class="tab-pane" id="contact_'+id+'"&gt;Contact Form: New Contact '+id+'&lt;/div&gt;');
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');
  
  .container {
      margin-top: 10px;
  }
  
  .nav-tabs &gt; li {
      position:relative;    
  }
  
  .nav-tabs &gt; li &gt; a {
      display:inline-block;
  }
  
  .nav-tabs &gt; li &gt; span {
      display:none;
      cursor:pointer;
      position:absolute;
      right: 6px;
      top: 8px;
      color: red;
  }
  
  .nav-tabs &gt; li:hover &gt; span {
      display: inline-block;
  }
  </code></pre>