add multiple fields with add more button with date picker

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
         
          <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker3.css" rel="stylesheet" />
            <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>

            <button class="add_field_button">Add More Fields</button>
            <button type="button" class="remove_field_button">Remove Field</button>
         
            <div class="input_fields_wrap">
                <div><input type="text" name="mytext[]" id="field0"></div>
            </div>

<script type="text/javascript">
jQuery(document).ready(function($) {
  var i = 1;
  var wrapper = $(".input_fields_wrap");
  var add_button = $(".add_field_button");
  var remove_button = $(".remove_field_button");

  $(add_button).click(function(e) {
      e.preventDefault();
      var total_fields = wrapper[0].childNodes.length;
      $(wrapper).append('<input type="text" name="answer[]" class="field-long" id="field' + i + '"; />');
      $('#field' + i + '').datepicker();
      i++;
  });
  $(remove_button).click(function(e) {
      e.preventDefault();
      var total_fields = wrapper[0].childNodes.length;

      if (total_fields > 1) {
          wrapper[0].childNodes[total_fields - 1].remove();
      }
  });
});
</script>