Problema con los Div en Ajax

[jhon_nos]

Hola, recurro a ustedes ya que he buscado y no he podido encontrar nada con respecto a mi pregunta.

Les comento mi problema:

Resulta que estoy realizando una función que me cargue un combo dependiendo de otro, por ejemplo dependiendo el área seleccionada, me cargue el curso correspondiente a esa área, hasta ahí todo bien. El problema es que los campos son dinámicos, es decir que el select o combo del área puede estar una o N veces en la pagina al igual que los div donde me carga el curso, yo le pongo un id a este div, lo que pasa es que cuando son más de una, este id se repite y esto no puede ser ya que los id son únicos.

Bien como esta medio enredado este asunto, lo grafico de la siguiente manera.
- Puedo agregar o quitar filas a través de una función javascript, presionando sobre la imagen con signo más y con signo menos.

[URL=http://imageshack.us/photo/my-images/706/dinamico.png/][IMG]http://img706.imageshack.us/img706/4985/dinamico.png[/IMG][/URL]

- Este script lo que hace es copiarme el primer <tr> de la tabla y copiarlo una vez por cada click sobre la imagen.

- Es por esto que me duplica el id del div.
- Este es el <tr> que se copia N veces.

Código PHP:

  <tr id="example" class="selection">
   <td height="25px" align="center">
        <select name="cbxArea[]" class="select" onchange="recuperaMuestraActividadDinamic(this);">
             <option value="0" selected="selected">Seleccione...</option>
             <option value="1">Area 1</option>
             <option value="2">Area 2</option>
        </select>
   </td>
   <td align="center">
        <div id="idDivMuestraCurso">
             <select name="cbxCurso[]" class="select">
                  <option value="0" selected="selected">Seleccione...</option>
             </select>
        </div>
   </td>
</tr>  
   

Los nombre de los campos están como array porque estoy trabajando con PHP y de esta manera los puedo recibir por post.

en fin.
El ID del DIV es "idDivMuestraCurso".
Y llamo a la función ajax así: onchange="recuperaMuestraCurso(this);"

En el archivo .js los recibo así:

Código PHP:

  function recuperaMuestraCurso(elemento){
    var idArea=elemento;
    idArea=idArea.options[idArea.selectedIndex].value;
    strURL="../ajaxMuestraCurso.php?id="+idArea;
    ajaxReturnMuestraCurso(strURL);
}

function ajaxReturnMuestraCurso(strUrl){
    var xmlHttp;
    try  {
        xmlHttp=new XMLHttpRequest();
    }
    catch (e) {
          try  {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          }
          catch (e) {
            try {
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) {
                alert("Your browser does not support AJAX!");
                return false;
            }
          }
    }
    xmlHttp.onreadystatechange=function() {
        if(xmlHttp.readyState<=3){
            document.getElementById('idDivMuestraCurso').innerHTML = "<select name='cbxCurso[]' disabled='disabled' class='select' style='width:280px'><option value='0'>Cargando...</option></select>";
        }
        if(xmlHttp.readyState==4){
            if(xmlHttp.status==200){
                ajaxResultMuestraCurso(xmlHttp.responseText);
            }else{
                document.getElementById('idDivMuestraCurso').innerHTML = "<select name='cbxCurso[]' disabled='disabled' class='select' style='width:280px'><option value='0'>Error... Por Favor Intente Nuevamente</option></select>";
            }
        }
    }
    xmlHttp.open("POST",strUrl,true);
    xmlHttp.send(null);
}

function ajaxResultMuestraCurso(consulta){
    var idDivMuestraCurso=document.getElementById('idDivMuestraCurso');
    idDivMuestraCurso.innerHTML=consulta;    
}  
   

En la función me recibe bien el valor del combo del select del area que yo selecciono, pero al mostrar el resultado siempre me lo muestra en el primer select del curso. y yo quiero que se me muestre al lado, sin afectar a los otros.

Ojala se entienda mi problema y puedan ayudarme.

Desde ya muchas gracias amigos.