How to add id for the date picker dynamically
<p>I am looking forward to do add more  option in that one text box two date picker and text area.here date pickers are working based id attribute but that is not changed in dynamically added row how to solve this problem below is the example code using textbox</p>

<pre><code> &lt;link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/&gt;
    &lt;link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/&gt;
    &lt;script type="text/javascript" src="../vendor/jquery/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="../dist/js/bootstrapValidator.js"&gt;&lt;/script&gt;

&lt;div class="container"&gt;
    &lt;div class="row"&gt;
        &lt;!-- form: --&gt;
        &lt;section&gt;
            &lt;div class="col-lg-8 col-lg-offset-2"&gt;
                &lt;div class="page-header"&gt;
                    &lt;h2&gt;Dynamic fields&lt;/h2&gt;
                &lt;/div&gt;

                &lt;form id="defaultForm" method="post" class="form-horizontal" action="target.php"&gt;
                    &lt;div class="form-group"&gt;
                        &lt;label class="col-lg-3 control-label"&gt;Textbox&lt;/label&gt;
                        &lt;div class="col-lg-5"&gt;
                            &lt;input class="form-control" type="text" name="textbox[]" placeholder="Textbox #1" /&gt;
                        &lt;/div&gt;
                        &lt;div class="col-lg-4"&gt;
                            &lt;button type="button" class="btn btn-default btn-sm addButton" data-template="textbox"&gt;Add&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="form-group hide" id="textboxTemplate"&gt;
                        &lt;div class="col-lg-offset-3 col-lg-5"&gt;
                            &lt;input class="form-control" type="text" /&gt;
                        &lt;/div&gt;
                        &lt;div class="col-lg-4"&gt;
                            &lt;button type="button" class="btn btn-default btn-sm removeButton"&gt;Remove&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;               


                    &lt;div class="form-group"&gt;
                        &lt;div class="col-lg-offset-3 col-lg-3"&gt;
                            &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/form&gt;
            &lt;/div&gt;
        &lt;/section&gt;
        &lt;!-- :form --&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>js</strong></p>

<pre><code> $(document).ready(function() {
        $('.addButton').on('click', function() {
            var index = $(this).data('index');
            if (!index) {
                index = 1;
                $(this).data('index', 1);
            }
            index++;
            $(this).data('index', index);

            var template     = $(this).attr('data-template'),
                $templateEle = $('#' + template + 'Template'),
                $row         = $templateEle.clone().removeAttr('id').insertBefore($templateEle).removeClass('hide'),
                $el          = $row.find('input').eq(0).attr('name', template + '[]');
            $('#defaultForm').bootstrapValidator('addField', $el);

            // Set random value for checkbox and textbox
            if ('checkbox' == $el.attr('type') || 'radio' == $el.attr('type')) {
                $el.val('Choice #' + index)
                   .parent().find('span.lbl').html('Choice #' + index);
            } else {
                $el.attr('placeholder', 'Textbox #' + index);
            }

            $row.on('click', '.removeButton', function(e) {
                $('#defaultForm').bootstrapValidator('removeField', $el);
                $row.remove();
            });
        });

        $('#defaultForm')
            .bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    'textbox[]': {
                        validators: {
                            notEmpty: {
                                message: 'The textbox field is required'
                            }
                        }
                    },
                    'checkbox[]': {
                        validators: {
                            notEmpty: {
                                message: 'The checkbox field is required'
                            }
                        }
                    },
                    'radio[]': {
                        validators: {
                            notEmpty: {
                                message: 'The radio field is required'
                            }
                        }
                    }
                }
            })
            .on('error.field.bv', function(e, data) {
                //console.log('error.field.bv --&gt;', data.element);
            })
            .on('success.field.bv', function(e, data) {
                //console.log('success.field.bv --&gt;', data.element);
            })
            .on('added.field.bv', function(e, data) {
                //console.log('Added element --&gt;', data.field, data.element);
            })
            .on('removed.field.bv', function(e, data) {
                //console.log('Removed element --&gt;', data.field, data.element);
            });
    });
</code></pre>