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!

[zerokilled]

un poco de busqueda y veras que a otros le han sucedido igual. anado input con javascript value borrado.

[worldPeace_Plis]

ok, ya lei acerca del DOM vs innerhtml, sigo pensando que innerhtmlsera como para hacer cosas mas rapidas
Me encontre con esto: http://www.mredkj.com/tutorials/tablebasics3.html que me ha ayudado un poco mas, mi problema estaba en remover y agregar sin afectar contenidos ya capturados

Por otra parte encontre que no tiene caso obtener valores de los inputs desde el js sino hasta despues que se procesa al php, ahi es donde guarda los valores enviados por post

Bueno "la sabiduria es una gota comparada con el enorme mar de ignorancia que tenemos"

Salu2!