bootstrap и динамическое добавление вкладок

есть вот такая разметка

  <!-- Навигация -->
  <ul class="nav nav-pills" role="tablist" id="navtabs">
  </ul>
  <!-- Содержимое вкладок -->
  <div class="tab-content" id="tabcontent">
  </div>

есть вот такой скрипт

<script>
    $(document).ready(function() 
    {
        $('#navtabs').empty();
        $('#tabcontent').empty();
        $.each(myArray, function(i, v)
        {
            $('#navtabs').append('<li class="nav-item"><a href="#' + v + '" role="tab" data-toogle="tab" class="nav-link" id="tabh' + i + '">' + v + '</li>');
            $('#tabcontent').append('<div role="tabpanel" class="tab-pane fade" id="' + v + '">' + v + '</div>');
        });
        $('#tabh0').tab('show');
    });
</script>

То есть смысл в том, чтобы вкладки и их содержимое сформировались на основании массива. И они сформировались, но не работают как надо.

$('#tabh0').tab('show');

Открывает первую вкладку

Если в консоли я напишу

$('#tabh1').tab('show');

откроется вторая вкладка.

Но по клику они не меняются. Помогите исправить.