Multi Images Upload with preview and Delete option - Jquery /Php

I have 2 issues with my website, I would be grateful for your help. The first one is that when I pick a picture to upload, then add other ones to upload after, the first ones do not show and only uploads the last ones The second problem is that when you upload the preview, then remove pictures using the"x" button they still appear in the final submit.

1

HTML

    <div class="img-box full">
    <section class=" img-section">
        <p class="up-p">Photos <br><span class="up-span">Photos (5 maximum)</span></p>
        <div class="z_photo upimg-div clear" >
                 <section class="z_file fl">
                    <img src="img/a11.png" class="add-img">
                    <input type="file" name="imageFile[]" id="file" class="file" value="" accept="image/jpg,image/JPG,image/jpeg,image/png,image/bmp" multiple />
                 </section>
         </div>
     </section>
</div>

jS

$(function(){
    var delParent;
    var defaults = {
        fileType         : ["jpg","JPG","png","bmp","jpeg"],  
        fileSize         : 1024 * 1024 * 10                 
    };

    $(".file").change(function(){    
        var idFile = $(this).attr("id");
        var file = document.getElementById(idFile);
        var imgContainer = $(this).parents(".z_photo"); 
        var fileList = file.files; 
        var input = $(this).parent();
        var imgArr = [];

        var numUp = imgContainer.find(".up-section").length;
        var totalNum = numUp + fileList.length;  
        if(fileList.length > 5 || totalNum > 5 ){
            alert("Le nombre d'images téléchargées ne peut pas dépasser 5, veuillez choisir à nouveau"); 
        }
        else if(numUp < 5){
            fileList = validateUp(fileList);
            for(var i = 0;i<fileList.length;i++){
             var imgUrl = window.URL.createObjectURL(fileList[i]);
                 imgArr.push(imgUrl);
             var $section = $("<section class='up-section fl loading'>");
                 imgContainer.prepend($section);
             var $span = $("<span class='up-span'>");
                 $span.appendTo($section);

             var $img0 = $("<img class='close-upimg'>").on("click",function(event){
                    event.preventDefault();
                    event.stopPropagation();
                    $(".works-mask").show();
                    delParent = $(this).parent();
                });   
                $img0.attr("src","img/a7.png").appendTo($section);
             var $img = $("<img class='up-img up-opcity'>");
                 $img.attr("src",imgArr[i]);
                 $img.appendTo($section);
             var $p = $("<p class='img-name-p'>");
                 $p.html(fileList[i].name).appendTo($section);
             var $input = $("<input id='taglocation' name='taglocation' value='' type='hidden'>");
                 $input.appendTo($section);
             var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>");
                 $input2.appendTo($section);

           }
        }
        setTimeout(function(){
             $(".up-section").removeClass("loading");
             $(".up-img").removeClass("up-opcity");
         },450);
         numUp = imgContainer.find(".up-section").length;
        if(numUp >= 5){
            $(this).parent().hide();
        }
    });



    $(".z_photo").delegate(".close-upimg","click",function(){
          $(".works-mask").show();
          delParent = $(this).parent();
    });

    $(".wsdel-ok").click(function(){
        $(".works-mask").hide();
        var numUp = delParent.siblings().length;
        if(numUp < 6){
            delParent.parent().find(".z_file").show();
        }
         delParent.remove();
    });

    $(".wsdel-no").click(function(){
        $(".works-mask").hide();
    });

        function validateUp(files){
            var arrFiles = [];
            for(var i = 0, file; file = files[i]; i++){

                var newStr = file.name.split("").reverse().join("");
                if(newStr.split(".")[0] != null){
                        var type = newStr.split(".")[0].split("").reverse().join("");
                        console.log(type+"===type===");
                        if(jQuery.inArray(type, defaults.fileType) > -1){

                            if (file.size >= defaults.fileSize) {
                                alert(file.size);
                                alert('Vous ceci"'+ file.name +'"La taille du fichier est trop grande');    
                            } else {

                                arrFiles.push(file);    
                            }
                        }else{
                            alert('Vous ceci"'+ file.name +'"Le type de téléchargement ne correspond pas'); 
                        }
                    }else{
                        alert('Vous ceci"'+ file.name +'"Aucun type, non reconnu'); 
                    }
            }
            return arrFiles;
        }



})

PHP

$queryy = "SELECT ID FROM add_animal WHERE ID_user  = '$id' ORDER BY ID DESC ";
                    $qu_run = mysqli_query($connection,$queryy);
                    $usertypess = mysqli_fetch_array($qu_run);

                        $ID_Add = $usertypess['ID'] ;
                 $errors= array();

                 $uploadFolder = 'upload/AnimauxImg/';
                foreach ($_FILES['imageFile']['tmp_name'] as $key => $image) {
                    $imageTmpName = $_FILES['imageFile']['tmp_name'][$key];

                    $imageName = date("Y-m-d-H-i-s").sha1($_FILES['imageFile']['name'][$key]);


                    $result = move_uploaded_file($imageTmpName,$uploadFolder.$imageName);

                    // save to database
                    $query = "INSERT INTO images_animal (ID_Add,img) VALUES ('$ID_Add' ,'$imageName') " ;
                    $run = $connection->query($query) or die("Erreur lors de l'enregistrement de l'image".$connection->error);