title: Multiple image in one button with preview
body: <p>i have a little problem with image upload preview. Here's the preview of the element :</p>
  
  <p><a href="https://i.stack.imgur.com/p1cUQ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p1cUQ.jpg" alt="image element"></a></p>
  
  <p>And this is the code :</p>
  
  <pre><code>&lt;div class="img-container"&gt;
    &lt;img id="preview-1" src="" alt="" /&gt;
    &lt;div class="more"&gt;
      &lt;img id="preview-2" src="" alt="" /&gt;
      &lt;img id="preview-3" src="" alt="" /&gt;
      &lt;span&gt;Max 3 images.&lt;/span&gt;
    &lt;/div&gt;
    &lt;label for="upload-btn" class="button"&gt;
      &lt;img src="ssts/img/svg/upload.svg" alt="" /&gt;
      &lt;span&gt;UPLOAD&lt;/span&gt;
      &lt;input id="upload-btn" name="upload" type="file" accept="image/*"/&gt;
    &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My problem is, how do i upload more than one image in single button and it will automatically show the preview in the element ? And after all of the element filled, the <code>upload button</code> will change to "Remove" that if clicked it will remove all the preview ? Thanks in advance!</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>the most important question is, "showing all of choosen images, and automatically show to the preview"</p>