Using callback to create multiple file preview

[koffisani]

I'm using the callback functionality to create another field. But can't make it work properly. After choosing one file, an input field is added dynamically to let user add another file. My code is as below :

var i=0;
$.uploadPreview({
            input_field: "#image-upload_" + i, // Default: .image-upload
            preview_box: "#image-preview_" + i, // Default: .image-preview
            label_field: "#image-label_" + i, // Default: .image-label
            label_default: "Choisir une image", // Default: Choose File
            label_selected: "Changer d'image", // Default: Change File
            no_label: false ,                // Default: false
            success_callback: function () {
                console.log(i);
                $(img_wrapper).append(
                    '<div class="col-lg-3 col-md-4">' +
                        '<div class="image-preview" id="image-preview__' + i + '">' +
                            '<label for="image-upload_<?= $i + 1 ?>" id="image-label_' + i + '">Choisir une image</label>' +
                            '<input name="files[' + i + ']" required="" id="image-upload_' + i + '" class="image-upload col-lg-12 col-md-12" type="file" style="height: 100%;">' +
                        '</div>' +
                    '</div>'
                );
                i++;
            }
        });

I thought this should work, but unfortunaltely, no. A need someone's touch to know how to do this.