No he podido con este script

[juanvc123]

se supone que este código me genere canvas deacuerdo al numero de imagenes que escoja del input file multiple y además me inserte la imagen.

el error que no he podido solucionar es que siempre me pone la ultima imagen.

escojo 5 imágenes diferentes y me inserta los 5 canvas pero con la imagen ultima.

Código Javascript:

$(document).on('ready', iniciar);
 
function iniciar(){
 
    var URL = window.webkitURL || window.URL;
    var inputFile = $('#pic');
 
    inputFile.change(function (event) {
        
    var lengthFile = inputFile.get(0).files.length;
 
        for(var i = 0; i < lengthFile; i++){
            var file = this.files[i];
            $('#sectionPreview').append('<canvas id="canvas'+i+'"></canvas>');
            
            var url = URL.createObjectURL(file);
            var img = new Image();
            img.src = url;
            img.onload = (function (value) {
                return  function()
                {
                    var canvas = document.getElementById('canvas' + value),
                     ctx = canvas.getContext('2d');
 
                    canvas.width = 200;
                    canvas.height = 200;
                    ctx.drawImage(img, 0, 0, 200, 200);
 
                    var imageName = $('#imageName');
                    imageName.val(file.name[value]);
                    console.log('imageName: ' + file.name + ''+ value);
 
                    var contentType = $('#contentType');
                    contentType.val(file.type);
                    console.log('contentType: ' + file.type);
 
                    var imageData = $('#imageData');
                    dataUrl = canvas.toDataURL('image/png').replace('data:image/png;base64,', '');
                    imageData.val(dataUrl); 
                };
            })(i);          
        }
    });
}