title: Uploading multiple file image and preview in jQuery before upload
body: <p>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.</p>
  
  <p>I don't know the problem I have been trying to figure it out over some hours now but not yet.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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 = "&lt;div class='filearray'&gt;&lt;img src=' ' &gt;&lt;input type='file' name='file[]' id='file"+idnum+"'&gt; &lt;label for='file"+idnum+"'&gt;&lt;img src='mediaimages/francis.jpg' width='150px' height='150px'&gt;&lt;/label&gt;&lt;/div&gt;";
        $(".append_pre_p_v").append(filearray);
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="append_pre_p_v"&gt;
    &lt;div class="filearray"&gt;
      &lt;img src="" /&gt;
      &lt;input type="file" name="file[]" id="f_p_v_up1" /&gt;    
      &lt;label for="f_p_v_up1"&gt;
        &lt;img src="mediaimages/francis.jpg" width="150px" height="150px" /&gt;
      &lt;/label&gt; 
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>