<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap Dynamic Tabs with AJAX Forms</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body class="p-4">

<div class="container">
  <h3 class="mb-3">Dynamic Tabs with AJAX Insert</h3>
  
  <!-- Tabs Nav -->
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="tab1-tab" data-bs-toggle="tab" data-bs-target="#tab1" type="button" role="tab">Tab 1</button>
    </li>
  </ul>

  <!-- Tabs Content -->
  <div class="tab-content border border-top-0 p-3" id="myTabContent">
    <div class="tab-pane fade show active" id="tab1" role="tabpanel">
      <form class="ajaxForm" method="post">
        <div class="mb-3">
          <label class="form-label">Name</label>
          <input type="text" class="form-control" name="name" required>
        </div>
        <div class="mb-3">
          <label class="form-label">Email</label>
          <input type="email" class="form-control" name="email" required>
        </div>
        <button type="submit" class="btn btn-primary">Save</button>
        <div class="mt-2 response"></div>
      </form>
    </div>
  </div>

  <!-- Add Tab Button -->
  <button id="addTab" class="btn btn-success mt-3">+ Add New Tab</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function () {
  let tabCount = 1;

  // Handle form submit (AJAX)
  $(document).on("submit", ".ajaxForm", function (e) {
    e.preventDefault();
    let form = $(this);

    $.ajax({
      url: "insert.php", // your PHP file for inserting into DB
      type: "POST",
      data: form.serialize(),
      success: function (response) {
        form.find(".response").html(`<span class="text-success">${response}</span>`);
        form.trigger("reset"); // reset form after success
      },
      error: function () {
        form.find(".response").html(`<span class="text-danger">Error saving data!</span>`);
      }
    });
  });

  // Add new tab with form
  $("#addTab").click(function () {
    tabCount++;

    // Create new tab button
    let newTab = `
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="tab${tabCount}-tab" data-bs-toggle="tab" data-bs-target="#tab${tabCount}" type="button" role="tab">
          Tab ${tabCount}
        </button>
      </li>
    `;
    $("#myTab").append(newTab);

    // Create new tab content with AJAX form
    let newContent = `
      <div class="tab-pane fade" id="tab${tabCount}" role="tabpanel">
        <form class="ajaxForm" method="post">
          <div class="mb-3">
            <label class="form-label">Name</label>
            <input type="text" class="form-control" name="name" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Email</label>
            <input type="email" class="form-control" name="email" required>
          </div>
          <button type="submit" class="btn btn-primary">Save</button>
          <div class="mt-2 response"></div>
        </form>
      </div>
    `;
    $("#myTabContent").append(newContent);

    // Activate new tab
    $(`#tab${tabCount}-tab`).tab('show');
  });
});
</script>

</body>
</html>
