How to create a new div each time a button is clicked?

This is my code:

function newMentee() {
  document.getElementById('new-mentee-form').style.display="block";
  document.getElementById('mentees').style.display="none";
}
function addMentee() {
  document.getElementById('new-mentee-form').style.display="none";
  document.getElementById('mentees').innerHTML=document.getElementById('name').value+'<br><br>'+document.getElementById('rating').value+'<br><br>'+document.getElementById('comments').value;
  document.getElementById('mentees').setAttribute("style","display:block;background-color:black;width:10em;height:10em;margin-top:5em;margin-left:2em;padding:2em;border-radius:2em;word-wrap:break-word;");
}

* {
    margin: 0;
    padding: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
  background-color: #3b4149;
}
header {
  background-color: #181b1e;
  width: 100%;
  height:15em;
}
header h1 {
  color:white;
  text-align: center;
  line-height: 5em;
  font-size: 3em;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul li {
  display: block;
  float:left;
  width: 25%;
  text-align: center;
  line-height: 2.5em;
  color:white;
  background-color: #1376d8;
}
ul li ul li {
  display: none;
}
ul li:hover {
  background-color: #18e288;
  opacity: 0.7;
}
ul li:hover ul li {
  display: block;
  width:100%;
}
#new-mentee-form {
  padding-top: 3em;
  color:white;
  background-color: black;
  width:20em;
  height:30em;
  margin-top: 3em;
  border-radius: 2em;
  display: none;
}
input,textarea {
  padding: 0.5em;
  color:white;
}
#submit {
  border-radius: 2em;
}
#submit:hover {
  background-color: #18e288;
}
textarea {
  resize:none;
}
#mentees {
  color:white;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="delta.css">
    <script type="text/javascript" src="delta.js">
    </script>
  </head>
  <body>
    <header>
      <h1>Mentee List</h1>
    </header>
    <nav>
      <ul>
        <li>List of Mentees</li>
        <li onclick="newMentee();">Add a mentee</li>
        <li>Remove a mentee</li>
        <li>Make an edit
          <ul>
            <li>Add Details</li>
            <li>Remove Details</li>
          </ul>
        </li>
      </ul>
    </nav>
    <div id="mentees">
    </div>
    <center>
    <div>
      <div id="new-mentee-form">
        Name:<br><br><input type="text" name="name" id="name"><br><br>
        Rating:<br><br><input type="text" id="rating" value=""><br><br>
        Comments:<br><br><textarea name="name" rows="8" cols="28" id="comments" maxlength="30"></textarea><br><br>
        <input type="submit" name="submit" value="Submit" id="submit" onclick="addMentee();">
      </div>
    </div>
  </center>
  </body>
</html>

My goal is to create a new div(this will be displayed like a card) with all the details entered by the user each time "Add Mentee" in the navigation bar is clicked. I do not want to store the data in an external file. Is there any way to retrieve the previous data from innerHTML and add a new div to the existing content of innerHTML? The problem I'm facing is that each time "Add Mentee" is clicked the previous data is wiped out. I want to do this in VanillaJS.

Solution

while assigning new value to innerHTML, you can append it with old value as

document.getElementById('mentees').innerHTML+='<br >' + document.getElementById('name').value+'<br><br>'+document.getElementById('rating').value+'<br><br>'+document.getElementById('comments').value;