Create new object without overwriting the old one in javascript

Question

I have a form with several inputs, available at https://jsfiddle.net/elenderg/6hofsyzw/ The goal is that the user can store several aircraft, which have a number of values. How can I store this data so that when adding a new aircraft, it does not overwrite the previously registered value? I’m studying object orientation, but I’m still stuck in that aspect.

<form>
     <p>Matrícula</br>
     <input type="text" name="" id="matricula" placeholder="GOL1234" maxlength="10"></input>
     </p>
     <p>Origem</br>
     <input type="text" name="" id="origem" placeholder="SBSP" maxlength="4"></input>
     </p>
     <p>Destino</br>
     <input type="text" name="" id="destino" placeholder="SBRJ" maxlength="4"></input>
     </p>
     <p>Nível</br>
     <input type="text" name="" id="nivel" placeholder="F145" maxlength="4"></input>
     </p>
     <p>Hora</br>
     <input type="text" name="" id="hora" placeholder="0843" maxlength="4"></input>
     </p></br>
     <button type="button" onclick="CriaAeronave()"><u>A</u>dicionar</button>
     <button type="button" onclick="ExibirAeronaves()"><u>E</u>xibir Aeronaves Adicionadas</button>
     <button type="button" onclick="ApagarAeronave()"><u>D</u>eletar Aeronave</button>
</form>
<p id="lista"></p>

var matricula = document.getElementById('matricula').value.toUpperCase();
var origem = document.getElementById('origem').value.toUpperCase();
var destino = document.getElementById('matricula').value.toUpperCase();
var nivel = document.getElementById('nivel').value.toUpperCase();
var hora = document.getElementById('hora').value;

 function CriaAeronave(matricula, origem, destino, nivel, hora){
    this.matricula = matricula;
    this.origem = origem;
    this.destino = destino;
    this.nivel = nivel;
    this.hora = hora; 
}

aeronave = new CriaAeronave(matricula, origem, destino, nivel, hora);

function ExibirAeronaves(){
    var lista = document.getElementById('lista').innerText;
    lista = aeronave.matricula;
}

function ApagarAeromave(matricula){
    delete aeronave.matricula;
}

form{
    border: 1px solid black;
    width:70%;
}
input{
    text-transform: uppercase;
    font-weight: 700;
    width: 70px;
}
p{
    margin-left: 5px;
    display:inline-block;
    font-size:12px;
}
button{
    margin-left: 5px;
    margin-bottom: 5px;
}

Answer 1

I found your question interesting and as you said you were studying I thought it would be worth leaving an answer. Your code presents several errors as already mentioned in the comments. I can’t say for sure if you instantiate a class through a function like you did new CriaAeronave(... is the most correct, because, I found nothing about it and honestly I have never seen it employed in practice, has this material if you want to know more about function and this other one about classes that it might be interesting to take a look:

// Descreve a classe
class CriaAeronave {
  constructor(matricula, origem, destino, nivel, hora) {
    this.matricula = matricula;
    this.origem = origem;
    this.destino = destino;
    this.nivel = nivel;
    this.hora = hora;
  }
}

// Variáveis para utlização
var lista = document.getElementById('lista');
var listaVisb = false;
var aero_naves = document.getElementById('aero_naves');
var _listas;
var msg = document.getElementById('msg');

// Função que gera a classe
function CriaAeronaves() {
  // Pega os valores dos campos
  var matricula = document.getElementById('matricula').value;
  var origem = document.getElementById('origem').value;
  var destino = document.getElementById('destino').value;
  var nivel = document.getElementById('nivel').value;
  var hora = document.getElementById('hora').value;
  
  //Instancia a classe 
  var aeronave = new CriaAeronave(matricula, origem, destino, nivel, hora);
  
  // O que vai ser retornando no Html
  var resultados = `<br> <em>Origem: ${aeronave.origem} - Destino: ${aeronave.destino}</em> <br>`;
  
   var b = document.createElement('b');
   b.innerHTML = resultados;
   lista.appendChild(b);
   
   let span = document.getElementsByTagName('span')[0];
   if(span) span.style.display = 'none';
}

function ExibirAeronaves() {
  listaVisb = !listaVisb;
  if (listaVisb == true) lista.style.display = 'block';
  else lista.style.display = 'none';
}

function ApagarAeronave() {
  var qtdBs = document.getElementsByTagName('b').length;
  lista.lastElementChild.remove();
  if(qtdBs == 1) lista.innerHTML = '<span>Nenhuma aeronave!</span>';
}

form {
  border: 1px solid black;
  width: 70%;
}

input {
  text-transform: uppercase;
  font-weight: 700;
  width: 70px;
}

p {
  margin-left: 5px;
  display: inline-block;
  font-size: 12px;
}

button {
  margin-left: 5px;
  margin-bottom: 5px;
}

#lista {
  display: none;
}

b {
  font-size: 15px;
}

span {
  color: red;
  font-size: 25px;
}

<form>
  <p>Matrícula<br>
    <input type="text" name="" id="matricula" placeholder="GOL1234" maxlength="10">
  </p>
  <p>Origem<br>
    <input type="text" name="" id="origem" placeholder="SBSP" maxlength="4">
  </p>
  <p>Destino<br>
    <input type="text" name="" id="destino" placeholder="SBRJ" maxlength="4">
  </p>
  <p>Nível<br>
    <input type="text" name="" id="nivel" placeholder="F145" maxlength="4">
  </p>
  <p>Hora<br>
    <input type="text" name="" id="hora" placeholder="0843" maxlength="4">
  </p><br>
  <button type="button" onclick="CriaAeronaves()"><u>A</u>dicionar</button>
  <button type="button" onclick="ExibirAeronaves()"><u>E</u>xibir Aeronaves Adicionadas</button>
  <button type="button" onclick="ApagarAeronave()"><u>D</u>eletar Aeronaves</button>
</form>
<p id="lista"></p>