Olá, estou criando uma pagina com o intuito de auxiliar em anuncios de vôos. Contém 4 inputs onde serão inseridas informações que deverão aparecer na tela para o usuario junto com frases já prontas. Tentei criar um clone desses inputs sem que as novas informações afetassem os anteriores, mas percebir que preciso adicionar esses novos inputs como se fossem uma nova div para que clone sem que exista interferencia entre elas. o primeiro input funciona normalmente, porem os clones já não funcionam.
var comp = "";
var voo = "";
var dest = "";
var emb = "";
function enviar(){
comp = document.getElementById("inputComp")
voo = document.getElementById("numVoo")
dest=document.getElementById("destino")
emb=document.getElementById("nEmb")
document.getElementById("mostrarComp").innerHTML = comp.value;
document.getElementById("mostrarVoo").innerHTML = voo.value;
document.getElementById("mostrarDest").innerHTML = dest.value;
document.getElementById("mostrarEmb").innerHTML = emb.value;
}
function clone(){
const dadosCloner = document.querySelector("#formulario").cloneNode("dadosCloner")
document.querySelector("#formulario").after(dadosCloner)
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anúncio de vôo</title>
</head>
<body>
<header>
<strong> Anuncio de vôos</strong>
</header>
<div id="inf">
<strong> Insira as informações abaixo </strong>
</div>
<div id="formulario">
<input type="text" name="inputComp" id="inputComp">
<input type="text" name="numVoo" id="numVoo">
<input type="text" name="destino" id="destino">
<input type="text" name="nEmb" id="nEmb">
<input type ="submit" name="enviar" onclick="enviar()">
<input type ="reset" name="Limpar Dados" onclick="reset()">
<h4 id="mostrarComp"><h4>Vôo</h4></h4>
<h4 id="mostrarVoo"><h4>com destino à</h4></h4>
<h4 id="mostrarDest"><h4>Embarque portão</h4></h4>
<h4 id="mostrarEmb"></h4>
</div>
<button onclick ="clone()" id="clone1"> + </button>
<script src="vooanuncio.js"></script>
</body>
</html>
Existe alguma maneira de resolver isso com javaScript Puro? (obs: Sou iniciante)