title: How To Preview Multiple Images Multiple div Before Upload - jQuery
body: <p>I have a Bootstrap Modal for uploading multiple images. When the User Click 'Add-Product-Image' Button, it will generate a new image upload input-form, and when the user selects an image it will instantly show an image below the upload button. My code works fine but I have a little issue.</p>
  <p><em><strong>My issue:</strong></em>
  When the User Click 'Add-Product-Image' Button, it will generate a new image upload input-form then select the image and new image replace the first image. I want to show the multiple images</p>
  <pre><code>&lt;div class=&quot;product-image&quot;&gt;
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;div class=&quot;Image-upload&quot;&gt;
              &lt;span class=&quot;image-option-close&quot;&gt;&amp;times;&lt;/span&gt;
              &lt;label for=&quot;product_images&quot;&gt; Upload Image &lt;/label&gt;
              &lt;img src=&quot;&quot; id=&quot;image&quot;  class=&quot;h-100&quot; alt=&quot;&quot;&gt;
              &lt;input type=&quot;file&quot; id=&quot;product_images[]&quot; accept=&quot;image/*&quot; name=&quot;product_images&quot; onchange=&quot;readURL(this);&quot;&gt;
             &lt;/div&gt;
           &lt;/div&gt;
         &lt;/div&gt;
  
  
  
  $(function () {
          $(this).on('click', '#add-product-image', function () {
              var form = '&lt;div class=&quot;form-group&quot;&gt;&lt;div class=&quot;Image-upload&quot;&gt;&lt;span class=&quot;image-option-close&quot;&gt;&amp;times;&lt;/span&gt;&lt;label for=&quot;product_images&quot; class=&quot;&quot;&gt;Upload Image&lt;/label&gt;&lt;input type=&quot;file&quot; id=&quot;product_images&quot; accept=&quot;image/*&quot; name=&quot;product_images[]&quot; onchange=&quot;readURL(this);&quot;&gt;&lt;/div&gt;&lt;/div&gt;';
              $('.product-image').append(form)
          });
  
          $(this).on('click', '.image-option-close', function () {
              var target_input = $(this).parent();
              target_input.remove();
          })
      });
  
  function readURL(input) {
          if (input.files &amp;&amp; input.files[0]) {
              var reader = new FileReader();
              reader.onload = function (e) {
                  $('#image')
                      .attr('src', e.target.result)
              };
              reader.readAsDataURL(input.files[0]);
          }
      }
  
  </code></pre>
  <p>Please See the gif file
  <a href="https://i.postimg.cc/MG3njJBS/ezgif-com-gif-maker.gif" rel="nofollow noreferrer">https://i.postimg.cc/MG3njJBS/ezgif-com-gif-maker.gif</a></p>