Dynamic add group of input field with dynamic sub input fields

Question

I want to add a group of the input fields with dynamic sub/ child input fields using jquery. but my problem is dynamically adding fields is not working with an appended new group of fields.

Example: https://codepen.io/exclutips/pen/oNwNgoX

var max_group = 5;
    var add_group = $('.add_group');
    var group_wrapper = $('.group_wrapper');


    var max_field = 10;
    var add_button = $('.add_button');
    var wrapper = $('.field_wrapper');
    var html_group =''+
    '<a href="javascript:void(0);" class="remove_group btn btn-sm btn-danger pull-right"><i class="fa fa-minus"></i> remove group</a>'+
    '<table id="itemTable" class="table">'+
'<thead>'+
'<tr>'+

    '<th>Item Name</th>'+
    '<th>Item Description</th>'+
    '<th>Action</th>'+
'</tr>'+
'</thead>'+
'<tbody class="field_wrapper">'+

'<tr class="item-group">'+
    '<td><input type="text" class="form-control" placeholder="Group name"></td>'+
'</tr>'+

'<tr class="item">'+
    '<td><input type="text" class="form-control" placeholder="Item name"></td>'+
    '<td><input type="text"class="form-control" placeholder="Item Description"></td>'+
    '<td><a href="javascript:void(0);" class="add_button btn btn-sm btn-primary" title="Add field"><i class="fa fa-plus"></i></a></td>'+
'</tr>'+
'</tbody>'+
'</table>';
    

    
    var html_fields = '' +
        '<tr class="item">' +
        '<td> <div class="form-group mb-0"> <input type="text" class="form-control" placeholder="Item name"> </div> </td> ' +
        '<td> <div class="form-group mb-0"> <input type="text" class="form-control" placeholder="Item Description"> </div> </td> ' +
        '<td> <a href="javascript:void(0);" class="remove_button btn btn-sm btn-danger"><i class="fa fa-minus"></i></a> </td>' +
        '</tr>';

    var x = 1;
    var y = 1;
    
    $(add_group).click(function(){
        if( y < max_group){
            y++;
            $(group_wrapper).append(html_group);
        }
    
    });
    
    
    $(group_wrapper).on('click', '.remove_group', function(e){
        e.preventDefault();
        $(this).closest('group_wrapper').parent('table').remove();
        y--;
    });
    

    $(add_button).click(function(){
        if(x < max_field){
            x++;
            $(this).closest(wrapper).append(html_fields);
        }
    });
    
    

    $(wrapper).on('click', '.remove_button', function(e){
        e.preventDefault();
        $(this).closest('tr').remove();
        x--;
    });

body{
  padding:50px;
}

.pull-right{
  float:right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/js/bootstrap.min.js"></script>

<div class="group_wrapper">
    <a href="javascript:void(0);" class="add_group btn btn-sm btn-primary pull-right" title="Add Group"><i class="fa fa-plus"></i> add group</a>
    <table id="itemTable" class="table">
        <thead>
            <tr>
                <th>Item Name</th>
                <th>Item Description</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody class="field_wrapper">
            <tr class="item-group">
                <td><input type="text" class="form-control" placeholder="Group name"></td>
            </tr>   
            <tr class="item">
                <td><input type="text" class="form-control" placeholder="Item name" required></td>
                <td><input type="text"class="form-control" placeholder="Item Description" ></td>
        
                <td><a href="javascript:void(0);" class="add_button btn btn-sm btn-primary" title="Add field"><i class="fa fa-plus"></i></a></td>
            </tr>
        </tbody>
    </table>
</div>

score 1 · Accepted Answer · edited Aug 23 '21 at 13:14

1

I've updated method for adding and removing field as bellow and it's work for me.

    $('body').on('click','.add_button',function(){
        if(x < max_field){
            x++;
            $(this).closest('.field_wrapper').append(html_fields);
        }
    });
    
    

    $('body').on('click', '.remove_button', function(e){
        e.preventDefault();
        $(this).closest('tr').remove();
        x--;
    });

You can find reason here for why your code is not working

https://stackoverflow.com/a/11878976/9787228

edited Aug 23 '21 at 13:14

Dharman

30,962
25
85
135

answered Aug 23 '21 at 12:03

Hiren Patel

1,071
11
34

So I also need to add dynamic ID and Array of name field so I can save data – Firefog Aug 23 '21 at 12:19
Yes, You need to add different id or class for control to access it values. – Hiren Patel Aug 23 '21 at 12:21

Dynamic add group of input field with dynamic sub input fields

1 Answers1