dudas add/remove fields dinamicamente, limpia informacion

[worldPeace_Plis]

estoy intentando hacer un formulario que me permita agregar y remover campos dinamicamente -...no va tan mal! jijiji- pero tengo dos problemas que no hayo como resolverlos:
1) Cuando agrego campos me agrega un select-option y un textfield los cuales si les ingreso datos y despues se me ocurre agregar otro campo entonces me limpia toda la informacion que ya habia capturado en los campos anteriores, como si reseteara todo

2) y luego mi segunda duda es al mandar toda la informacion cuando ya deseo procesarla, al agregar campos agrega : campo1, campo2, 3,4,5,6,7 y va sumando un contador, asi agrego campo 20,21,etc
Cada campo permite ser removido, la cosa es que puedo remover el campo 1, 7, 11, etc... y entonces me quedaria una lista de campos con numeracion discontinua, entonces, como puedo mandar la informacion para ser procesada? campo1,campo2,3,7,9,15,16,17, etc...,

Aqui el script:

Código Javascript:

var numCampos = 1; 
var enlistar = '<option value="1">1</option>\n<option value="2">2</option>\n<option value="3">3</option>\n<option value="4">4</option>\n';
 
function remueve(idCampo) {     
    var oparent = document.getElementById('dinContenedor');
    var ochild = document.getElementById(idCampo);
    oparent.removeChild(ochild); 
}
 
function agrega() { 
    removelink = "<a style='cursor: pointer; color: blue;' onclick=\"remueve('datos'+"+numCampos+");\">Remover</a>";
    document.getElementById('dinContenedor').innerHTML += '<div id="datos' + numCampos + '" style="text-align:left;">' +
    '<select name="id' + numCampos + '" style="width:170px; margin-right:5px;">\n<option value="">- Selecciona -</option>\n' + enlistar + '</select> ' + '<input type="text" name="TextInput' + numCampos + '" id="TextInput' + numCampos + '" value="'+numCampos+'" style="width:400px">\n' + removelink + ' </div>'; 
        
        document.forms[0].contadorCampos.value = numCampos;   // El numero de formulario en el html/code
        numCampos++; 
} 
 
function revision() { 
    if (numCampos == 1) { 
            alert('Por lo menos agrega un campo!); 
            return false; 
        } 
    return true; 
    }
 

y este el formulario:

Código:

<div style="width:90%; margin:15px auto 0 auto;">
<form action="totalFields.php" method="post" onSubmit="return revision();"> 
    <table cellspacing="0" cellpadding="4" border="0" width="100%"> 
        <tr><td align="right"><input type="button" value="Agregar campos" onClick="agrega();"></td></tr>
		<tr><td><div class="hdr1">Categoria</div><div class="hdr2">Nombre Articulo</div><td></tr> 
        <tr> 
            <td id="dinContenedor" valign="top"> 
                <!-- POST or GET. -->  
            </td> 
        </tr> 
        <tr> 
            <td align="right" colspan=2> 
                <!-- Oculto, funcion: pasar contadro de campos a procesar. --> 
                <input type="hidden" name="contadorCampos"> 
                <input type="submit" value="Enviar"> 
            </td> 
        </tr> 
    </table> 

</form>
<div>

Como puedo recoger los valores? y porque al agregar campos me resetea los ya llenados? Ojala me puedan dar un tip, da antemano gracias por leer mi consulta

Salu2!