[Resolvido] Formulário Dinâmico

Tenho o seguinte codigo:

<script>
function maisForm(id){
document.getElementById(id).innerHTML += '<input type="text" id="data" name="data[]"><input type="text" id="hora" name="hora[]"><br>';
}
</script>
<input type="button" onclick="maisForm('div')" value="Mais campos">
<div id="div">
</div>

Quando clico em "Mais campos", são adicionados 2 campos (vou usar para receber datas e horas).

E quando clicar em "Mais campos", novamente, quero que os valores já digitados nos outros campos permaneçam.

Com fazer isso?

E como apagar o último campo criado?

O código abaixo apaga sempre os primeiros campos.

document.getElementById("data").parentNode.removeChild(document.getElementById("data"));
document.getElementById("hora").parentNode.removeChild(document.getElementById("hora"));