How do I add new row of data with javascript?

I'm creating add file function for my user, in this function, user have to insert their file name, choose their file then click on the Add Document button.

once user have add the document it will display back the user document under the add document button. User can add more as many as document they want.

I have trouble in adding the data. The file keep getting missing when user try to attach new file.

I want to display all file list of the user before the submitting it.

first add document

then user wants to add another document, the first document get replaced

second document

how do I make it not to overwrite the older document when user add more document ?

<div class="col-md-12 mb-3">
     <textarea class="form-control" id="name" ></textarea>
</div>
<div class="col-md-12 mb-3">
   <button type="button" class="btn btn-success w-100 choseDoc">Select document</button>
   <input type="file" id="file" hidden>
</div>

<div class="col-md-12 mb-3">
 <button type="button" class="btn btn-info w-100" onclick="myFunction()">Add Document</button>
</div>

<div>
 <p id = "demo"></p>

</div>

 <script>
    function myFunction() {

    let filename= $('#name').val();
    let doc = $('#file').val();
                                                             
    let fileData = '';

    fileData += `<div class="tab-content col-12 mt-4" id="myTabContent-2">
                   <div class="tab-pane fade show active" id="addCustodian" role="tabpanel" aria-labelledby="addCustodian-tab">
                      <div class="col-md-12">         
                        <ul class="perfomer-lists m-0 p-0" id="">
                          <li class="d-flex mb-4 align-items-center">
                            <img class="avatar-20 rounded ml-2" src="assets\avatar.png" style="width: 50px;">
                             <div class="media-support-info ml-3">
                                                                                                                
                              <a class="font-size-12 font-weight-600"><b>${filename}</b></a>
                                                                                                                
                              <p class="mb-0 font-size-12"> ${doc}</p>
                                                                                                            
                            </div>
                                                                                                        
                          </li>
                      </ul>
                 </div>  
               </div>
          </div> `;
 document.getElementById("demo").innerHTML = fileData;