Add Remove Group of Input Fields Dynamically using jQuery

The Input fields group is very useful when the bulk data needs to be submitted at once. If you have a requirement to submit a group of bulk data with multiple input fields, the input group makes it easy for you. Instead of showing some specific number of input groups at once, you can add the input groups dynamically to make the web application more user-friendly.

In the previous tutorial, we have shown how to add or remove input fields dynamically using jQuery. But that script allows users to add a single input field on each click. Now we will extend its functionality to make web form more productive. In this tutorial, we will show you how to add/remove group of input fields dynamically using jQuery and submit input field group values using PHP.

Add & Remove Group of Input Fields Dynamically

The following example shows how you can add more groups of multiple input fields dynamically with jQuery and submit the multiple input fields group data using PHP. For the example purpose, we will use two fields (name & email) in each group and all groups can be submitted at once.

Bootstrap & jQuery Library:
We will use Bootstrap to make the input fields and buttons look better. So, include the Bootstrap CSS library first.

• jQuery is used to implement add more input fields group functionality. So, include the jQuery library as well.

<!-- Bootstrap css library -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

Note that: If you don’t want to use the Bootstrap library, you can skip to include the Bootstrap library (bootstrap.min.css). But the jQuery library is required to implement add more input fields group functionality.

HTML Code:
Initially, one group of input fields will be shown and the more input group can be added by the Add More button placed beside this input fields group. Also, a hidden input group is placed which will be used to add more input fields HTML with the remove button.

<form method="post" action="submit.php">
    <!-- Group of input fields -->
    <div class="form-group fieldGroup">
        <div class="input-group mb-3">
            <input type="text" name="first_name[]" class="form-control" placeholder="First Name"/>
            <input type="text" name="last_name[]" class="form-control" placeholder="Last Name"/>
            <input type="text" name="email[]" class="form-control" placeholder="Email address"/>
            <span class="input-group-text">
                <a href="javascript:void(0);" class="btn btn-success addMore"><i class="custicon plus"></i> Add</a>
            </span>
        </div>
    </div>

    <!--Submit button -->
    <input type="submit" name="submit" class="btn btn-primary" value="Submit"/>
</form>

<!-- Replica of input field group HTML -->
<div class="form-group fieldGroupCopy" style="display: none;">
    <div class="input-group mb-3">
        <input type="text" name="first_name[]" class="form-control" placeholder="First Name"/>
        <input type="text" name="last_name[]" class="form-control" placeholder="Last Name"/>
        <input type="text" name="email[]" class="form-control" placeholder="Email address"/>
        <span class="input-group-text">
            <a href="javascript:void(0)" class="btn btn-danger remove"><i class="custicon cross"></i> Remove</a>
        </span>
    </div>
</div>

JavaScript Code:
Once the Add More button (.addMore) is clicked, the clone HTML from the hidden input group will append after the last fieldGroup. You can also restrict the limit to add the input fields group by maxGroup.

• The Remove button (.remove) deletes the parent fieldGroup.

<script>
$(document).ready(function(){
    // Maximum number of groups can be added
    var maxGroup = 10;
    
    // Add more group of input fields
    $(".addMore").click(function(){
        if($('body').find('.fieldGroup').length < maxGroup){
            var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
            $('body').find('.fieldGroup:last').after(fieldHTML);
        }else{
            alert('Maximum '+maxGroup+' groups are allowed.');
        }
    });
    
    // Remove fields group
    $("body").on("click",".remove",function(){ 
        $(this).parents(".fieldGroup").remove();
    });
});
</script>

Get Input Values of Multiple Field Groups in PHP

Once the form of multiple text fields group is submitted to the server-side script (submit.php), use the $_POST method to retrieve value from the input fields using PHP.

<?php 
 
// If form is submitted 
if(isset($_POST['submit'])){ 
    // Get values in array 
    $first_name_arr = $_POST['first_name']; 
    $last_name_arr = $_POST['last_name']; 
    $email_arr = $_POST['email']; 
     
    if(!empty($first_name_arr)){ 
        for ($i = 0; $i < count($first_name_arr); $i++) { 
            $first_name = $first_name_arr[$i]; 
            $last_name = $last_name_arr[$i]; 
            $email = $email_arr[$i]; 
 
            // Your database query goes here 
            //... 
        } 
    } 
} 
 
?>