title: Replace and preview multiple image upload
body: <p>I have images being dynamically shown with this code</p>
  
  <pre><code>    &lt;?php
          $query = "SELECT post_gallery_img FROM posts WHERE post_id = $get_post_id";
          $select_gallery_imgs = mysqli_query($connection, $query);
  
          while($row = mysqli_fetch_assoc($select_gallery_imgs)) {
              $post_gallery_img = $row['post_gallery_img'];
  
              $post_gallery_img = explode(',', $row['post_gallery_img']);
  
              foreach($post_gallery_img as $out) {
                  echo '&lt;img class="imgFile" id="editPostGalleryImgs" src="../userImages/' . $out . '" alt="Post Image"&gt;';
              }
          }
      ?&gt;
  </code></pre>
  
  <p>And the result is this </p>
  
  <p><a href="https://i.stack.imgur.com/8Kn59.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8Kn59.jpg" alt="3 dynamic images"></a></p>
  
  <p>Now I am trying to let the user upload multiple new images but I want them to be able to preview the new images in place of the dynamic ones.</p>
  
  <p>I have this code for the multiple preview</p>
  
  <pre><code>&lt;input id="galleryImgs" type="file" multiple="multiple" name="files[]"&gt;&lt;button style="display: none;" onclick="reset2($('#galleryImgs'));event.preventDefault()"&gt;&lt;/button&gt;
  &lt;div class="gallery"&gt;&lt;/div&gt;
  
  &lt;script&gt;
   $(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, editPostGalleryImgs) {
  
      if (input.files) {
          var filesAmount = input.files.length;
  
          for (i = 0; i &lt; filesAmount; i++) {
              var reader = new FileReader();
  
              reader.onload = function(event) {
                  $($.parseHTML('&lt;img&gt;')).attr('src', event.target.result).appendTo(editPostGalleryImgs);
              }
  
              reader.readAsDataURL(input.files[i]);
          }
      }
  
    };
  
    $('#galleryImgs').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Which brings back this 
  <a href="https://i.stack.imgur.com/Rktsu.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Rktsu.jpg" alt="dynamic images"></a></p>
  
  <p>The problems is, I want the preview images to replace the dynamic images instead of them being displayed on top.</p>