show or make visible active tab

Question

I have working code of bootstrap tabs. where I can add and delete the tabs. Also shows the arrow down when tabs are overflowed. so user can click on arrow to see how many tabs are available. Problems:

1. when I click on tab from drop down menu it make it active but doesn't scroll to left. so that user can see active tab on top.
2. add and delete buttons work. but when tabs are overflowed and it show new plus icon to add new add. then I can't delete. (may b problem with DOM ready.) tried to do document on click. but that didn't work.
3. Same when I try to delete tab from drop down menu its doesn't delete.

thank you...

Example Jsfiddle

chkPlusIcon();

 function chkPlusIcon() {
     setTimeout(function () {
         var pageWidth = $(".pull-left-db-nav-tabs").width();
         var lastElementLi = $(".db-nav-tabs");
         var elementWidth = $(lastElementLi).width();
         var elementLeft = $(lastElementLi).position().left;

         $('.pull-right-db-nav-tabs-ul').empty();
         if (pageWidth - (elementWidth + elementLeft) < 0) {
             console.log("overflow!");
             $('.pull-right-db-nav-tabs').css('display', 'block');
             if ($('.pull-right-db-nav-tabs-ul li') >= 1) {} else {
                 $('.db-nav-tabs > li').clone().appendTo('.pull-right-db-nav-tabs-ul');
             } /*  $('.add-tab-last').css('display','none');*/

         } else {
             console.log("doesn't overflow");
             $('.pull-right-db-nav-tabs').css('display', 'none');
             $('.pull-right-db-nav-tabs-ul').empty();

         }
     }, 500);
 }
 $(window).resize(function () {
     chkPlusIcon();
 });


 //  add New tabs


 var tabCount = 9;
 //$('.db-add-new-tab').click(function (e) {
 $(document).on('click', '.db-add-new-tab', function (e) {
     console.log('add tab button clicked');
     chkPlusIcon();
     tabCount++;
     var nextTab = tabCount;
     var addTabLast = $('.db-nav-tabs li.add-tab-last');
     var addTabLastDropDown = $('.pull-right-db-nav-tabs-u li.add-tab-last');
     // create the tab
     $('<li class=""><a href="#tab' + nextTab + '" data-toggle="tab">tab ' + nextTab + '<i class="glyphicon  glyphicon-edit db-edit-tab glyphiconColor db-nav-tab-icons-both " ></i><i class="glyphicon glyphicon-trash db-del-tab glyphiconColor db-nav-tab-icons-both" > </i> </a> </li> ').insertBefore(addTabLast);
     $('<li class=""><a href="#tab' + nextTab + '" data-toggle="tab">tab ' + nextTab + '<i class="glyphicon  glyphicon-edit db-edit-tab glyphiconColor db-nav-tab-icons-both " ></i><i class="glyphicon glyphicon-trash db-del-tab glyphiconColor db-nav-tab-icons-both" > </i> </a> </li> ').insertBefore(addTabLastDropDown);
     // create the tab content
     $('<div class="tab-pane fade in" id="tab' + nextTab + '">tab' + nextTab + ' content</div>').appendTo('.tab-content');
     // make the new tab active

     $('#tabs').find('.glyphicon-trash').click(removeTab);


     $('#tabs a:last').tab('show');
 });



 // remove tab

 var removeTab = function () {
     chkPlusIcon();

     var contentId = $(this).closest('li').find('a').attr('href');
     contentId = contentId.replace('#', '');
     $('#' + contentId).remove();
     $(this).closest('li').remove();

     //$('.pull-right-db-nav-tabs-ul').find('#' + contentId).remove();
     //$('#tabs a:first').tab('show');
     $('#tabs a:first').tab('show');
 };

 $('.db-del-tab').click(removeTab);

Answer 1

Issues I found

1.You didn't give overflow to the pink div , how can you scroll it . i don't think it is possible.
2.Unable to reproduce this issue.
3.when i click on trash in pink bar i got dashboard-content as contentId and i when clicked in drop down i got overview-content . both are not same so delete in dropdown is not working.

Possible Fix for 3rd issue is replace overview-content with dashboard-content and it looks like function removeTab has incorrect logic.