Bootstrap Tabs Panel Pass dynamic content

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Customized Bootstrap 5 Modal Example</title>
    
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>

<body>
    <div class="container">
      <h3>Bootstrap Tabs Panel Pass dynamic content</h3>
      <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
          <a
            class="nav-link active"
            id="home-tab"
            data-bs-toggle="tab"
            href="#home"
            role="tab"
            aria-controls="home"
            aria-selected="true"
            >Home</a
          >
        </li>
        <li class="nav-item" role="presentation">
          <a
            class="nav-link"
            id="profile-tab"
            data-bs-toggle="tab"
            href="#profile"
            role="tab"
            aria-controls="profile"
            aria-selected="false"
            >Profile</a
          >
        </li>
        <li class="nav-item" role="presentation">
          <a
            class="nav-link"
            id="contact-tab"
            data-bs-toggle="tab"
            href="#contact"
            role="tab"
            aria-controls="contact"
            aria-selected="false"
            >Contact</a
          >
        </li>
      </ul>
      <div class="tab-content" id="myTabContent">
        <div
          class="tab-pane fade show active"
          id="home"
          role="tabpanel"
          aria-labelledby="home-tab"
        >
          
          <h2>Home Tab</h2>
          <p>This is the content of the Home tab.</p>
        </div>
        <div
          class="tab-pane fade"
          id="profile"
          role="tabpanel"
          aria-labelledby="profile-tab"
        >
          
          <h2>Profile Tab</h2>
          <p>This is the content of the Profile tab.</p>
        </div>
        <div
          class="tab-pane fade"
          id="contact"
          role="tabpanel"
          aria-labelledby="contact-tab"
        >
          
          <h2>Contact Tab</h2>
          <p>This is the content of the Contact tab.</p>
        </div>
      </div>
    </div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      // Activate the tabs
      $(document).ready(function () {
        $("#myTab a").on("click", function (e) {
          e.preventDefault();
          $(this).tab("show");
        });

// Dynamically add content to tabs
        var additionalContent = {
          profile: {
            title: "Additional Profile Content",
            content: "This is additional content for the Profile tab.",
          },
          contact: {
            title: "Additional Contact Content",
            content: "This is additional content for the Contact tab.",
          },
        };

for (var tab in additionalContent) {
          var tabContent = additionalContent[tab];
          var tabPane = $("#" + tab);
          var newContent = `
                <div class="additional-content">
                    <h2>${tabContent.title}</h2>
                    <p>${tabContent.content}</p>
                </div>
            `;
          tabPane.append(newContent);
        }
      });
    </script>
    <style>
      /* Customizing the active tab link */
      .nav-link.active {
        background-color: #007bff;
        color: #fff;
      }

/* Customizing the tab content background and padding */
      .tab-content {
        background-color: #f8f9fa;
        padding: 20px;
      }

/* Customizing the tab content headings */
      .tab-pane h2 {
        margin-top: 0;
        margin-bottom: 10px;
        color: #007bff;
      }

/* Customizing the tab content paragraphs */
      .tab-pane p {
        line-height: 1.6;
      }

/* Additional Styling for Tabs and Content */
      .nav-tabs {
        border-bottom: 2px solid #007bff;
      }

.nav-tabs .nav-item {
        margin-bottom: -1px;
      }

.nav-tabs .nav-link {
        border: 1px solid transparent;
        border-radius: 0;
        color: #007bff;
      }

.nav-tabs .nav-link:hover {
        border-color: #007bff;
      }

.additional-content {
        margin-top: 20px;
        border: 1px solid #dee2e6;
        padding: 20px;
        border-radius: 5px;
        background-color: #fff;
      }

.additional-content h2 {
        color: #007bff;
        margin-top: 0;
      }

.additional-content p {
        line-height: 1.6;
      }
    </style>
  </body>
</html>