Jquery – Why is my code not working? I want a form to generate a PDF File when the button submit is clicked and a confirmation modal to appear

this is my code

I’m new to programming but I was assigned this project.

I’m using jquery, js, html2pdf and bootstrap5

what is wrong and what does it need to work?

Perhaps is the order of links in the header?

The fullcode is in the following link:

https://codepen.io/ghustky/pen/RwvawYy

 <script>
      // JavaScript to generate PDF and show confirmation modal
      document
        .getElementById("submitBtn")
        .addEventListener("click", function (e) {
          e.preventDefault(); // Prevent the default form submission

          // Capture form data
          const formData = {
            name: document.getElementById("name").value,
            lastName: document.getElementById("lastName").value,
            SecondlastName: document.getElementById("SecondlastName").value,
            Documentname: document.getElementById("Documentname").value,
            gender: document.getElementById("genderSelect").value,
            dateOfIssuance: document.getElementById("dateOfIssuance").value,
            documentType: document.getElementById("documentTypeSelect").value,
            dateOfBirth: document.getElementById("dateOfBirth").value,
            nationality: document.getElementById("nationality").value,
            dateOfEntry: document.getElementById("dateOfEntry").value,
          };

          // Create a div to hold the HTML content to be converted to PDF
          const content = document.createElement("div");
          content.innerHTML = "<h2>Form Data:</h2>";
          Object.keys(formData).forEach((key) => {
            content.innerHTML += `<p><strong>${key}:</strong> ${formData[key]}</p>`;
          });

          // Generate PDF using html2pdf.js
          html2pdf()
            .from(content)
            .set({
              margin: 10,
              filename: "form_data.pdf",
              image: { type: "jpeg", quality: 0.98 },
              html2canvas: { scale: 2 },
              jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
            })
            .outputPdf()
            .then(function (pdf) {
              // Show confirmation modal
              $("#confirmationModal").modal("show");

              // You can save the PDF or display it to the user
              // For example, save it:
              pdf.save("form_data.pdf");
            });
        });
    </script>
  </body>
</html>