Add Remove input fields dynamically using jQuery

Use it with bootstrap 5 it's look better -

• "Add Remove input fields dynamically": This part implies that the script or code being referred to has the functionality to both add and remove input fields dynamically. "Dynamically" means that the action is performed dynamically on the client-side, typically in response to user interaction or some other event, without requiring a page reload.
• "using jQuery": This indicates that jQuery, a popular JavaScript library, is the tool being utilized to achieve the dynamic addition and removal of input fields. jQuery simplifies DOM manipulation and event handling in JavaScript, making it easier to write concise and efficient code for web development tasks.
• Overall, this line suggests that there's likely JavaScript/jQuery code written to enable users to dynamically add and remove input fields on a web page, enhancing interactivity and user experience.

source code -

<div class="container mt-5">
    <form id='aditional_info'>
        <div class="row mb-3 dynamicForm">
            <div class="col mb-3">
                <input type="text" class="form-control" name="inputField" id="input" placeholder="Type something...">
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-success add-input">+</button>
            </div>
        </div>
        <div class="row mb-3" >
            <div class="col">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </form>
</div>


<!-- Bootstrap JS and jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<script>
    $(document).ready(function () {
        // Add new input field
        let index = 1;
        $(document).on('click','.add-input', function () {
            var newInputField = '<div class="row mb-3">' +
                '<div class="col">' +
                '<input type="text" class="form-control" name="inputField" id="input'+index+'" placeholder="Type something...">' +
                '</div>' +
                '<div class="col-auto">' +
                '<button type="button" class="btn btn-success mr-2 add-input">+</button>' +
                '<button type="button" class="btn btn-danger remove-input">-</button>' +
                '</div>' +
                '</div>';
               index++;     
            $('.dynamicForm').append(newInputField);  
        });

        // Remove the clicked input field
        $('.dynamicForm').on('click', '.remove-input', function () {
            $(this).closest('.row').remove();
            
        });
    $('#aditional_info').on('submit', function (e) {
            e.preventDefault();
            let formData = $(this).serializeArray();
            alert(formData);
          
        });
 });
</script>

tag - add more fields in jquery,add remove input fields dynamically,add remove input fields jquery,jquery add remove input field,dynamic input field,dynamic input field jquery,jquery,tutorial,codexworld,add remove fields jquery,add/remove input fields dynamically with jquery,add field dynamically to form in jquery and php,dynamically add & remove input fields in php,how to dynamically add & remove input fields in php with jquery,add more fields jquery,add more row in jquery,dynamically add form field php,add more textbox in jquery,a dd more input fields jquery.