inputで複数のファイルを取得し、横並びに表示したい。

前提・実現したいこと

初心者プログラマーで質問も初めてなので、文章が拙いですがご了承ください。

結論から言うと、一つのインプットに複数の画像を入力、追加したいです。
現在、フリマアプリのクローンサイトを作っています。
そのなかの出品画面にて、一つの商品に対して複数の画像を登録する画面があるのですが、１枚しか表示できず困っています。
inputで画像を選択すると、１枚は表示されます。そこから画像の追加のため、もう一度inputで画像を選択したところ、元々あった画像と置き換わってしまいます。

発生している問題

https://gyazo.com/3465360fe20c44a00b4ebd47065a2669

該当のソースコード

haml
1%main.exhibition
2  .exhibition__contents
3    .contents-header
4      %h2 商品の情報を入力
5    .up-load-box
6      %h3.title-holder
7        出品画像
8        %span.form-require 必須
9      %p 最大5枚までアップロードできます
10
11      .up-load-box__drop-box
12        %ul
13          %li.upload-item
14            %figure
15              %img#preview
16            .button
17              =link_to '#', class: 'destroy' do
18                削除
19        %label#drop-area
20          %input.drop-file-area{type: "file", multiple: 'multiple',id: "drop-upload-file", name: "image",accept: "image/*" ,}
21          %pre
22            ドラッグアンドドロップ 
23            またはクリックしてファイルをアップロード

scss
1.exhibition{
2  background-color: $white;
3  width: 700px;
4  margin: 0 auto;
5  
6  .infomation{
7    display: inline-block;
8    color: $white;
9    background-color: $lightblue;
10    border-radius: 50%;
11    height: 14px;
12    width: 14px;
13    line-height: 14px;
14    font-size: 12px;
15    text-align: center;
16  }
17  .form-require{
18    margin-bottom: 8px;
19    padding: 3px 5px;
20    border-radius: 2px;
21    color: $white;
22    background-color: $red;
23    font-size: 12px;
24    vertical-align: top;
25    font-weight: bold;
26  }
27  &__contents{
28    .contents-header{
29      border-bottom: 2px solid $lightgray;
30      text-align: center;
31      h2{
32        padding: 32px 16px;
33        font-size: 22px;
34      }
35    }
36
37    .up-load-box{
38      padding: 40px;
39      border-bottom: 2px solid $lightgray;
40      h3{
41        font-size: 16px;
42      }
43      p{
44        margin-top: 6px;
45        font-size: 13px;
46      }
47      &__drop-box{
48        margin-top: 10px;
49        min-height: 162px;
50        width: 100%;
51        position: relative;
52        display: flex;
53        
54        ul{
55          top: 0;
56          display: flex;
57          z-index: 2;
58
59          li.upload-item{
60            background-color: darken($lightgray, 3%);
61            margin-right: 2%;
62            width: 116px;
63            display: none;
64            position: relative;
65            figure{
66              top: 0;
67              height: 116px;
68              width: 114px;
69              text-align: center;
70              background-color: darken($lightgray, 3%);
71              img{
72                top: 2px;
73                height: 140px;
74                width: 105px;
75                transform: translate(-50%);
76                position: absolute;
77                object-fit: cover;
78              }
79            }
80            .button{
81              font-size: 14px;
82              .destroy{
83                position: absolute;
84                text-align: center;
85                background-color: darken($lightgray, 3%);
86                display: inline-block;
87                line-height: 44px;
88                width: 100%;
89              }
90            }
91          }
92
93        }
94
95        label{
96          background-color: darken($lightgray, 3%);
97          outline: 1px dashed $gray;
98          position: relative;
99          display: block;
100          min-height: 162px;
101          width: 100%; 
102          
103
104          input{
105            display: block;
106            position: absolute;
107            opacity: 0;
108            height: 100%;
109            width: 100%;
110            z-index: 5;
111            cursor: pointer;
112          }
113
114          pre{
115            position: absolute;
116            font-size: 14px;
117            text-align: center;
118            line-height: 1.5;
119            top: 60px;
120            left: 16px;
121            right: 16px;
122          }
123        }
124        
125      }
126    }

Jquery
1$(function(){
2  $('.drop-file-area').on('change', function(e){
3    $('.upload-item').css('display','block');
4    $('#drop-area').css('margin-left','2%');
5  })
6})

見にくい書き方になっていたらすみません；；

display:none; で消していた li 要素を画像が選択されたら display:block; にして表示しているような状態です。
この書き方では１枚しか表示できないのでしょうか？？
表示した際にだけ li　の要素を出したいのですがこの方法しか浮かびませんでした...

詳しい方ご教授お願いします<(_ _)>