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 the group of bulk data with multiple input fields, the input group makes it easy for you. 

Instead of shown 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 earlier tutorial, we have shown how to add or remove input fields dynamically using jQuery. But this script allows users to add a single input field in one click. Now we will extend its functionality to make web form more productive. In this tutorial, we will show you how to add input fields group dynamically using jQuery and submit input groups value 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
The Bootstrap is used to make the input and button look better and the jQuery is used to implement add more input fields group functionality. So, you need to include the Bootstrap and jQuery library first.

<!-- Bootstrap css library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/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
Initially, one input fields group 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">
            
    <div class="form-group fieldGroup">
        <div class="input-group">
            <input type="text" name="name[]" class="form-control" placeholder="Enter name"/>
            <input type="text" name="email[]" class="form-control" placeholder="Enter email"/>
            <div class="input-group-addon"> 
                <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
            </div>
        </div>
    </div>
    
    <input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"/>
    
</form>

<!-- copy of input fields group -->
<div class="form-group fieldGroupCopy" style="display: none;">
    <div class="input-group">
        <input type="text" name="name[]" class="form-control" placeholder="Enter name"/>
        <input type="text" name="email[]" class="form-control" placeholder="Enter email"/>
        <div class="input-group-addon"> 
            <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
        </div>
    </div>
</div>

JavaScript
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 limit to add the input fields group by maxGroup. The Remove button (.remove) deletes the parent fieldGroup.

$(document).ready(function(){
    //group add limit
    var maxGroup = 10;
    
    //add more fields group
    $(".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();
    });
});

Get Input Value of Multiple Field Group in PHP

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

<?php
if(isset($_POST['submit'])){
    $nameArr = $_POST['name'];
    $emailArr = $_POST['email'];
    if(!empty($nameArr)){
        for($i = 0; $i < count($nameArr); $i++){
            if(!empty($nameArr[$i])){
                $name = $nameArr[$i];
                $email = $emailArr[$i];
                
                // Database insert query goes here
            }
        }
    }
}
?>