Bootstrap Dynamic Tabs

by cymatik

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Saggezza Expenses</title>
    <!-- Bootstrap Default CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Custom CSS Stylesheet-->
    <link rel="stylesheet" href="css/styles.css">
    <!-- Font Awesome library -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  </head>

  <body>
    <nav class="navbar navbar-expand-lg my-shadow">
      <!-- <div class="container"> -->
      <a href="home.php" class="navbar-brand">
				<img src="images/saggezza.png" width="141px" height="56px" title="Saggezza Logo" alt="saggezza-logo">
			</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>

      <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a href="home.php" class="nav-link">Expenses <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a href="submit.php" class="nav-link">Submit</a>
          </li>
          <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"...

CSS

body {
  background: #464646;
  color: #ddd;
  margin-bottom: 25px;
}

.navbar {
  background-color: #4a7aae;
  font-size: 20px;
}

.my-shadow {
  box-shadow: 0 8px 6px -6px #000000;
}

.navbar .navbar-brand {
  color: #ddd;
}

.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color: #ddd;
}

.navbar .navbar-text {
  color: #ddd;
}

.navbar .navbar-text a {
  color: #ddd;
}

.navbar .navbar-text a:hover,
.navbar .navbar-text a:focus {
  color: #ddd;
}

.navbar .navbar-nav .nav-link {
  color: #ddd;
  border-radius: .25rem;
  margin: 0 0.25em;
}

.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
  color: #ddd;
}

.navbar .navbar-nav .dropdown-menu {
  background-color: #222;
  border-color: #000;
}

.navbar .navbar-nav .dropdown-menu .dropdown-item {
  color: #ddd;
}

.navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar .navbar-nav .dropdown-menu .dropdown-item:focus,
.navbar .navbar-nav .dropdown-menu .dropdown-item.active {
  color: #ddd;
  background-color: #4a7aae;
}

.navbar .navbar-nav .dropdown-menu .dropdown-divider {
  border-top-color: #4a7aae;
}

.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
  color: #ddd;
  background-color: #4a7aae;
}

.navbar .navbar-toggle {
  border-color: #6195cc;
}

.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
  background-color: #6195cc;
}

.navbar .navbar-toggler {
  border-color: rgba(0, 0, 0, 0.5);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4...

JavaScript

$(".nav-tabs").on("click", "a", function(e) {
    e.preventDefault();
    if (!$(this).hasClass('addNew')) {
      $(this).tab('show');
    }
  })
  .on("click", "span", function() {
    var anchor = $(this).parent('a');
    $(this).parent().parent().remove();
    $(".nav-tabs li").children('a').first().click();
  });

var defaultValues = $('#expense_1>.card-body').html()

$('.addNew').click(function(e) {
  e.preventDefault();
  var id = $(".nav-tabs").children().length; //think about it ;)
  var tabId = 'expense_' + id;
  $(this).closest('li').before('<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#expense_' + id + '">Expense #' + id + ' <span>x</span></a></li>');
  $('.tab-content').append('<div class="tab-pane fade" id="' + tabId + '"><div class="card-header">Expense #' + id + '</div><div class="card-body">' + defaultValues + '</div></div>');
  $('.nav-tabs li:nth-child(' + id + ') a').click();
});