HTML динамически добавлять входной файл не работает

Question

Например, у меня есть раздел под названием students

Я позволяет пользователю добавлять студенту динамически

Каждый студент имеет поля Имя, Очки, & Изображение

Имя & Баллы работы. Проблема возникает, когда я добавляю Image поля

См прикрепление выше, когда я пытаюсь выбрать файл из 2-го студента, значение изображения переходит к 1-му студенту.

<label for="student-image-1"> был точечно на 1-й студент
<label for="student-image-2"> была точка на 2-й студент

, И идентификатор для ввода имени файла было правильным.

Примечание: Я использую jQuery.clone дублировать div

Любая идея, почему я выбираю второй вход будет заселить в 1-ый?

Исходный код

$('#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('<form>').closest('form').get(0).reset(); 
    fileinput.unwrap(); 
    $clone.find('.bootstrap-filestyle > label.btn') 
     .attr('for', 'student-image-' + next_id) 
    ; 
    $clone.find('.bootstrap-filestyle > 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); 
}); 

HTML от поджигатель

<div id="student-row-1"> 
    <div class="form-group "> 
     <div class="col-lg-3 col-md-3 col-sm-3 control-label"> 
      <span class="badge bg-info student-no">1</span> 
      <div class="clearfix visible-xs"></div> 
      <label class="student-label" for="student-1">Name</label>           <em class="red">*</em> 
     </div> 
     <div class="col-lg-6 col-md-7 col-sm-7"> 
      <input type="text" value="" name="students[0][title]" class="form-control title-control" id="title-1">          </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-lg-3 col-md-3 col-sm-3 control-label"> 
      <label class="point-label" for="point-1">Points</label>           <em class="red">*</em> 
     </div> 
     <div class="col-lg-6 col-md-7 col-sm-7"> 
      <input type="text" value="" name="students[0][point]" class="form-control point-control" id="point-1">          </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-lg-3 col-md-3 col-sm-3 control-label"> 
      <label class="image-label" for="student-image-1">Image</label>           <em class="red">*</em> 
     </div> 
     <div class="col-lg-6 col-md-8 col-sm-8"> 
      <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;"><div style="display: inline;" class="bootstrap-filestyle"><input type="text" disabled="" class="form-control inline input-s"> <label class="btn btn-default" for="student-image-1"><span>Choose file</span></label></div>          </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-lg-3 col-md-3 col-sm-3 control-label"></div> 
     <div class="col-lg-6 col-md-7 col-sm-7"> 
      <a title="Delete" data-toggle="modal" href="#" class="btn btn-danger btn-sm hidden" data-url="student-row-1">Delete</a> 
     </div> 
    </div> 
</div> 
<div id="student-row-2" style="display: block;"> 
    <div class="form-group "> 
     <div class="col-lg-3 col-md-3 col-sm-3 control-label"> 
      <span class="badge bg-info student-no">2</span> 
      <div class="clearfix visible-xs"></div> 
      <label class="student-label" for="student-1">Name</label>           <em class="red">*</em> 
     </div> 
     <div class="col-lg-6 col-md-7 col-sm-7"> 
      <input type="text" value="" name="students[1][title]" class="form-control title-control" id="title-2">          </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-lg-3 col-md-3 col-sm-3 control-label"> 
      <label class="point-label" for="point-1">Points</label>           <em class="red">*</em> 
     </div> 
     <div class="col-lg-6 col-md-7 col-sm-7"> 
      <input type="text" value="" name="students[1][point]" class="form-control point-control" id="point-2">          </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-lg-3 col-md-3 col-sm-3 control-label"> 
      <label class="image-label" for="student-image-2">Image</label>           <em class="red">*</em> 
     </div> 
     <div class="col-lg-6 col-md-8 col-sm-8"> 
      <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;"><div style="display: inline;" class="bootstrap-filestyle"><input type="text" disabled="" class="form-control inline input-s"> <label class="btn btn-default" for="student-image-2"><span>Choose file</span></label></div>          </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-lg-3 col-md-3 col-sm-3 control-label"></div> 
     <div class="col-lg-6 col-md-7 col-sm-7"> 
      <a title="Delete" data-toggle="modal" href="#deleteModal" class="btn btn-danger btn-sm btn-delete" data-url="student-row-2">Delete</a> 
     </div> 
    </div> 
</div> 

Answer 1

Наконец решил проблему, я просто понял, что входной файл использует Bootstrap Filestyle.

// file 
var file_container = $clone.find('.filestyle').parent(); 
file_container.empty(); 
var fileinput = $('<input>').addClass('filestyle').attr({ 
    id: 'student-image-'+next_id, 
    name: 'students_image['+count+']', 
    type: 'file', 
}); 
file_container.append(fileinput); 
fileinput.filestyle({ 
    icon: 'false', 
    classButton: 'btn btn-default', 
    classInput: 'form-control inline input-s', 
}); 
var file_label_container = file_container.prev(); 
var new_label = $('<label>').addClass('image-label').attr('for', 'student-image-'+next_id).text(file_label_container.find('label').text()); 
file_label_container.find('label').remove(); 
file_label_container.prepend(new_label); 

я удалить первоначальный вход, и воссоздать обычный ввод, а затем использовать filestyle стилизовать входной файл и добавить в контейнер. Как и этикетка с левой стороны.