Превью показывается не так как надо

var filestoupload = []; 
function previewFiles() { 
 
  var preview = document.querySelector('#preview'); 
  var files = document.querySelector('input[type=file]').files; 
 
  function readAndPreview(file) { 
 
    // Make sure `file.name` matches our extensions criteria 
    if (/\.(jpe?g|png|gif)$/i.test(file.name)) { 
      var reader = new FileReader(); 
 
      reader.addEventListener("load", function() { 
        var image = new Image(); 
        image.height = 100; 
        image.title = file.name; 
        image.src = this.result; 
        filestoupload.push(this.result) 
        var div= document.createElement('div'); 
        var divdel= document.createElement('div'); 
        divdel.className='delete' 
        divdel.innerHTML='<i class="fa fa-times" aria-hidden="true"></i>' 
        div.className='fileprew' 
        div.appendChild(divdel); 
        div.appendChild(image); 
        preview.appendChild(div); 
        console.log('files to upload: ', filestoupload.length) 
         
      }, false); 
 
      reader.readAsDataURL(file); 
    } 
 
  } 
 
  if (files) { 
    [].forEach.call(files, readAndPreview); 
     
  } 
 
} 
$('body').on("click", ".delete", function() { 
   
  index=$(this).index(); 
  console.log('удаляем файл: ',index) 
  filestoupload.splice(index, 1); 
  $(this).parent().remove(); 
  console.log('files to upload: ', filestoupload.length) 
 
});

.upload-file-container:first-child {  
  margin-left: 0; 
}  
 
.upload-file-container > img { 
  width: 160px; 
    height: 160px; 
    margin-left: 55px; 
    border-radius: 55%; 
} 
 
.upload-file-container-text{ 
  font-family: Arial, sans-serif; 
  font-size: 12px; 
  color: #719d2b; 
  line-height: 17px; 
  text-align: center; 
  display: block; 
  position: absolute;  
  left: 0;  
  bottom: 0;  
  width: 100px;  
  height: 35px; 
} 
.upload-file-container-two:first-child {  
  margin-left: 0; 
}  
 
.upload-file-container-two > img { 
  width: 160px; 
    height: 160px; 
    margin-left: 55px; 
    border-radius: 55%; 
} 
 
.upload-file-container-text-two{ 
  font-family: Arial, sans-serif; 
  font-size: 12px; 
  color: #719d2b; 
  line-height: 17px; 
  text-align: center; 
  display: block; 
  position: absolute;  
  left: 0;  
  bottom: 0;  
  width: 100px;  
  height: 35px; 
} 
 
 
.file_upload_two { 
    overflow: hidden; 
    background: #eee; 
    border: 1px solid #ccc; 
    font-size: 23px; 
    line-height: 1.65; 
    text-align: center; 
    /* padding: 20px; */ 
    width: 95px; 
    top: 96px; 
    height: 40px; 
    width: 60vw; 
    margin-left: 14px; 
    border-radius: 20px; 
    border-color: rgba(0, 0, 255, 0.18); 
    color: #efefef; 
    background-color: rgb(30, 190, 190); 
    text-shadow: -1px 0px 2px black; 
    font-family: sans-serif; 
    font-weight: bold; 
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); 
} 
 .file_upload_two:hover { 
box-shadow: 0px 2px 2px 1px #6a6666; 
    color: white; 
    cursor: pointer; 
 } 
.file_upload_two input[type=file] { 
  position: relative; 
    top: -40px; 
    line-height: 0px; 
    right: 0; 
    font-size: 200px; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    cursor: pointer; 
    height: 0; 
    cursor: pointer; 
} 
 
.file_upload { 
    overflow: hidden; 
    background: #eee; 
    border: 1px solid #ccc; 
    font-size: 23px; 
    line-height: 1.65; 
    text-align: center; 
    /* padding: 20px; */ 
    width: 95px; 
    top: 96px; 
    height: 40px; 
    width: 30vw; 
    margin-left: 14px; 
    border-radius: 20px; 
    border-color: rgba(0, 0, 255, 0.18); 
    color: #efefef; 
    background-color: rgb(30, 190, 190); 
    text-shadow: -1px 0px 2px black; 
    font-family: sans-serif; 
    font-weight: bold; 
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); 
} 
 .file_upload:hover { 
box-shadow: 0px 2px 2px 1px #6a6666; 
    color: white; 
    cursor: pointer; 
 } 
.file_upload input[type=file] { 
  position: relative; 
    top: -40px; 
    line-height: 0px; 
    right: 0; 
    font-size: 200px; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    cursor: pointer; 
    height: 0; 
    cursor: pointer; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
 
<div id="preview"></div> 
 
 
<br> 
<div class="file_upload"> Добавить<input type="file" class="photo" id="photo" name="photo[]" onchange="previewFiles()" multiple/></div> 
<br><br><br> 
<div class="file_upload_two"><i class="fa fa-camera" aria-hidden="true"></i> Подгрузить документы<input type="file" class="photoDoc" id="doc" name="doc[]" onchange="previewFiles()" multiple/></div> 
    </div> 
    <div id="preview"></div> 
  </div>