title: HTML dynamically add file input not working
body: <p>For example, I have a section called <code>students</code></p>
  
  <p>I allow user to add student dynamically</p>
  
  <p>Each student has the fields <strong>Name</strong>, <strong>Points</strong>, &amp; <strong>Image</strong></p>
  
  <p>The <strong>Name</strong> &amp; <strong>Points</strong> works. The problem comes when I add the <strong>Image</strong> field</p>
  
  <p><img src="https://i.stack.imgur.com/fvHMu.gif" alt="enter image description here"></p>
  
  <p>See the attachment above, when I try to select the file from 2nd student, the image value goes to the 1st student.</p>
  
  <p><code>&lt;label for="student-image-1"&gt;</code> was point to the 1st student<br>
  <code>&lt;label for="student-image-2"&gt;</code> was point to the 2nd student</p>
  
  <p>And the <strong>id</strong> for file input was correct.</p>
  
  <p><strong>NOTE: I'm using <a href="http://api.jquery.com/clone/" rel="noreferrer">jQuery.clone</a> to duplicate the <code>div</code></strong></p>
  
  <p>Any idea why I choose 2nd input will populate to 1st one?</p>
  
  <p><strong>Source code</strong></p>
  
  <pre><code>$('#student-add-more').click(function(e) {
  
      e.preventDefault();
  
      var count = $('div[id^=student-row-]').length;
      var last = $('div[id^=student-row-]').last();
      var $clone = last.clone(true);
  
      var next_id = count + 1;
  
      $clone.attr('id', 'student-row-' + next_id);
  
      $clone.find('.image-label')
          .attr('for', 'student-image-' + next_id)
      ;
      var fileinput = $clone.find('.filestyle')
          .attr('id', 'student-image-' + next_id)
          .attr('name', 'students_image['+count+']')
      ;
  
      fileinput.wrap('&lt;form&gt;').closest('form').get(0).reset();
      fileinput.unwrap();
      $clone.find('.bootstrap-filestyle &gt; label.btn')
          .attr('for', 'student-image-' + next_id)
      ;
      $clone.find('.bootstrap-filestyle &gt; input').val('');
  
      var delete_button = $clone.find('.btn-danger')
          .attr('data-url', 'student-row-' + next_id)
          .attr('href','#deleteModal')
          .attr('class', 'btn btn-danger btn-sm btn-delete')
      ;
      delete_button.closest('.form-group').removeAttr('style');
  
      $clone.show().insertAfter(last);
  });
  </code></pre>
  
  <p><strong>html from firebug</strong></p>
  
  <pre><code>&lt;div id="student-row-1"&gt;
      &lt;div class="form-group "&gt;
          &lt;div class="col-lg-3 col-md-3 col-sm-3 control-label"&gt;
              &lt;span class="badge bg-info student-no"&gt;1&lt;/span&gt;
              &lt;div class="clearfix visible-xs"&gt;&lt;/div&gt;
              &lt;label class="student-label" for="student-1"&gt;Name&lt;/label&gt;                                            &lt;em class="red"&gt;*&lt;/em&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-6 col-md-7 col-sm-7"&gt;
              &lt;input type="text" value="" name="students[0][title]" class="form-control title-control" id="title-1"&gt;                                        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;div class="col-lg-3 col-md-3 col-sm-3 control-label"&gt;
              &lt;label class="point-label" for="point-1"&gt;Points&lt;/label&gt;                                            &lt;em class="red"&gt;*&lt;/em&gt;
           &lt;/div&gt;
          &lt;div class="col-lg-6 col-md-7 col-sm-7"&gt;
              &lt;input type="text" value="" name="students[0][point]" class="form-control point-control" id="point-1"&gt;                                        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;div class="col-lg-3 col-md-3 col-sm-3 control-label"&gt;
              &lt;label class="image-label" for="student-image-1"&gt;Image&lt;/label&gt;                                            &lt;em class="red"&gt;*&lt;/em&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-6 col-md-8 col-sm-8"&gt;
              &lt;input type="file" name="students_image[0]" data-classinput="form-control inline input-s" data-classbutton="btn btn-default" data-icon="false" class="filestyle" id="student-image-1" style="position: fixed; left: -500px;"&gt;&lt;div style="display: inline;" class="bootstrap-filestyle"&gt;&lt;input type="text" disabled="" class="form-control inline input-s"&gt; &lt;label class="btn btn-default" for="student-image-1"&gt;&lt;span&gt;Choose file&lt;/span&gt;&lt;/label&gt;&lt;/div&gt;                                        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;div class="col-lg-3 col-md-3 col-sm-3 control-label"&gt;&lt;/div&gt;
          &lt;div class="col-lg-6 col-md-7 col-sm-7"&gt;
              &lt;a title="Delete" data-toggle="modal" href="#" class="btn btn-danger btn-sm hidden" data-url="student-row-1"&gt;Delete&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="student-row-2" style="display: block;"&gt;
      &lt;div class="form-group "&gt;
          &lt;div class="col-lg-3 col-md-3 col-sm-3 control-label"&gt;
              &lt;span class="badge bg-info student-no"&gt;2&lt;/span&gt;
              &lt;div class="clearfix visible-xs"&gt;&lt;/div&gt;
              &lt;label class="student-label" for="student-1"&gt;Name&lt;/label&gt;                                            &lt;em class="red"&gt;*&lt;/em&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-6 col-md-7 col-sm-7"&gt;
              &lt;input type="text" value="" name="students[1][title]" class="form-control title-control" id="title-2"&gt;                                        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;div class="col-lg-3 col-md-3 col-sm-3 control-label"&gt;
              &lt;label class="point-label" for="point-1"&gt;Points&lt;/label&gt;                                            &lt;em class="red"&gt;*&lt;/em&gt;
           &lt;/div&gt;
          &lt;div class="col-lg-6 col-md-7 col-sm-7"&gt;
              &lt;input type="text" value="" name="students[1][point]" class="form-control point-control" id="point-2"&gt;                                        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;div class="col-lg-3 col-md-3 col-sm-3 control-label"&gt;
              &lt;label class="image-label" for="student-image-2"&gt;Image&lt;/label&gt;                                            &lt;em class="red"&gt;*&lt;/em&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-6 col-md-8 col-sm-8"&gt;
              &lt;input type="file" name="students_image[1]" data-classinput="form-control inline input-s" data-classbutton="btn btn-default" data-icon="false" class="filestyle" id="student-image-2" style="position: fixed; left: -500px;"&gt;&lt;div style="display: inline;" class="bootstrap-filestyle"&gt;&lt;input type="text" disabled="" class="form-control inline input-s"&gt; &lt;label class="btn btn-default" for="student-image-2"&gt;&lt;span&gt;Choose file&lt;/span&gt;&lt;/label&gt;&lt;/div&gt;                                        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;div class="col-lg-3 col-md-3 col-sm-3 control-label"&gt;&lt;/div&gt;
          &lt;div class="col-lg-6 col-md-7 col-sm-7"&gt;
              &lt;a title="Delete" data-toggle="modal" href="#deleteModal" class="btn btn-danger btn-sm btn-delete" data-url="student-row-2"&gt;Delete&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>