HTML dynamically add file input not working

Question

For example, I have a section called students

I allow user to add student dynamically

Each student has the fields Name, Points, & Image

The Name & Points works. The problem comes when I add the Image field

See the attachment above, when I try to select the file from 2nd student, the image value goes to the 1st student.

<label for="student-image-1"> was point to the 1st student
<label for="student-image-2"> was point to the 2nd student

And the id for file input was correct.

NOTE: I'm using jQuery.clone to duplicate the div

Any idea why I choose 2nd input will populate to 1st one?

Source 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('<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 from firebug

<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

Finally solved the problem, I just realized that the file input was using 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);

I remove the original input, and recreate a plain input, then use the filestyle to style the file input and append to the container. As well as the label on left hand side.