<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic Add Fields Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <form id="myForm"> <div id="inputFields"> <!-- Initially, no input fields --> </div> <button type="button" id="addFieldButton">Add Field</button> <button type="submit">Submit</button> </form> <script> $(document).ready(function(){ $("#addFieldButton").click(function(){ // Create a new input field var inputField = $("<input type='text'>"); // Append the new input field to the container $("#inputFields").append(inputField); }); // Optional: If you want to handle form submission $("#myForm").submit(function(event){ event.preventDefault(); // Prevent default form submission // Get values from all input fields var fieldValues = $("#inputFields input").map(function(){ return $(this).val(); }).get(); // Do something with the values (e.g., submit via AJAX, log to console) console.log(fieldValues); }); }); </script> </body> </html>