Uploading multiple file image and preview in jQuery before upload

I am trying to allow users on my site to upload multiple photo and also preview once on change using jQuery, but my problem is that the first file once on change preview and then append a new file input but the one that is appended does not preview once on change.

I don't know the problem I have been trying to figure it out over some hours now but not yet.

$(function(){
  $(".append_pre_p_v div input[type=file]").on("change",function(){
    var filecount = $(".append_pre_p_v").children("div").length;
      //var idnum = filecount + 1;
      var filereader = new FileReader();
      var img = $(this).siblings("img");
      filereader.onloadend = function(){
        img.attr("src",this.result).css({"width":"150px","height":"150px"});
      };
      filereader.readAsDataURL(this.files[0]);
      $(this).siblings("label").hide();
      var filearray = "<div class='filearray'><img src=' ' ><input type='file' name='file[]' id='file"+idnum+"'> <label for='file"+idnum+"'><img src='mediaimages/francis.jpg' width='150px' height='150px'></label></div>";
      $(".append_pre_p_v").append(filearray);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="append_pre_p_v">
  <div class="filearray">
    <img src="" />
    <input type="file" name="file[]" id="f_p_v_up1" />    
    <label for="f_p_v_up1">
      <img src="mediaimages/francis.jpg" width="150px" height="150px" />
    </label> 
  </div>
</div>

I did not know whether I understand your problem well.When a image was previewed and user adds another image,but the previous image disappeared,right? I made some changes to your code to make the answer more clear.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="append_pre_p_v">
  <div class="filearray">  
  </div>
  <input type="file" name="file[]" id="f_p_v_up1" />  
</div>
<script>
    $(document).on('ready',()=>{
    $("#f_p_v_up1").on('change',function(){
      var filereader = new FileReader();
      var $img=jQuery.parseHTML("<img src=''>");
      filereader.onload = function(){
          $img[0].src=this.result;
      };
      filereader.readAsDataURL(this.files[0]);
      $(".filearray").append($img);
    });
  });
</script>

I was wondering why not let user upload multiple file one time.The code below is the multiple input version.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="append_pre_p_v">
    <div class="filearray">  
    </div>
    <input type="file" name="file[]" id="f_p_v_up1" multiple />  
</div>
<script>
$(document).on('ready',()=>{
    $("#f_p_v_up1").on('change',function(){
        $(".filearray").empty();//you can remove this code if you want previous user input
        for(let i=0;i<this.files.length;++i){
            let filereader = new FileReader();
            let $img=jQuery.parseHTML("<img src=''>");
            filereader.onload = function(){
                $img[0].src=this.result;
            };
            filereader.readAsDataURL(this.files[i]);
            $(".filearray").append($img);
        }
    });
});
</script>

Hope this helps.