I have two functions one that creates an image preview for each image uploaded and another one that clones the input file if the user clicks on choose file button to prevent the previous file from being removed.

jsFiddle

this is the image preview function

var multiImgPreview = function(input, imgPreviewPlaceholder) {

    if (input.files) {
     $("#multipleImageUpload").on("change", function(e) {
        var filesAmount = input.files.length;

        for (i = 0; i < filesAmount; i++) {
            var reader = new FileReader();

            reader.onload = function(event) {
                $("<span class=\"pip\">" + 
                "<span class=\"remove_icon\">Remove</span>" +
                "<img src=\"" + event.target.result + "\" title=\"" + "\"/>" +
                "</span>").appendTo(imgPreviewPlaceholder);
 
                $(".remove_icon").click(function(){
                   $(this).parent(".pip").remove();
                 }); 
            }

            reader.readAsDataURL(input.files[i]);
        }
      });
    }
};

and this is the clone function

$(document).on('click', '#multipleImageUpload', function() {
    
    // add to preview
    multiImgPreview(this, 'div.imgPreview');
    
    //clone
    
    var originalInput = $(this), cloned = originalInput.clone();
    
    // move
    originalInput.attr("id", Date.now());
    originalInput.removeClass('multipleImageUpload');
    originalInput.appendTo($('#multipleFilesPH'));
    
    cloned.attr("id", "multipleImageUpload");
    cloned.insertAfter($('#multipleFilesPH'));

    originalInput = null;
    cloned = null;

});

the issue here is when I click remove it only removes the preview of the image and not the input cloned, how to dynamically bind the cloned input to the image preview in order to remove the image and never send it to the server?