Q: ¿Como puedo crear un objeto dinámico dentro/desde otro objeto dinámico en php y js? el siguiente código es de una página de encuestas, en la cual tengo un botón para añadir preguntas y un botón para añadir respuestas dentro de las preguntas, para que las preguntas se creen dinámicamente necesito tener creada la primera pregunta, este es el codigo del archivo php:
  <form action = "recoleccion.php" method = "post">
    
    <div id = "contenedorPreguntas">
      
      <div >
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-default">Pregunta</span>
          </div>
          <input type="text" name= "pregunta" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
          
          <input type="button" value = "agregar respuesta" id = "agregarR"/> 

        </div>
        
      </div>
      
    </div>
    
    <input type="button" value = "agregar pregunta" id = "agregarP"/>   
    
    <input type = "submit" value="Cargar encuesta " />
    
  </form>

  
<script src="js/dom.js"></script>

<script src="js/Preguntas.js"></script>

<script src="js/Respuesta.js"></script>

Entonces, lo que hago aquí es primero crear la pregunta con su input y el botón de "agregar respuesta" junto con otro botón de "agregar pregunta". Uso los scripts del último para agregar más apartados de pregunta y también puedo agregar apartados de respuesta, pero el problema es que solo puedo hacerlo en la segunda pregunta, en las demás preguntas que son generadas por medio del botón al momento de querer agregar respuestas no funciona.
los scripts son los siguientes:
Preguntas.js:

const btn_agregarPregunta = document.getElementById('agregarP');

btn_agregarPregunta.addEventListener('click', function(){

    const div_princ = D.create('div');

    const div_pregunta = D.create('div',{class:"input-group mb-3"});

    const div_preguntaInt = D.create('div',{class:"input-group-prepend"});

    
    const span_pregunta = D.create('span',{innerHTML: 'Pregunta',class:"input-group-text" ,id:"inputGroup-sizing-default"});
    
    const input_pregunta = D.create('input',{type:'text', name:'pregunta', class:'form-control'});

    const btn_respuesta = D.create('input',{type:'button',  value: "agregar respuesta" ,id : "agregarR" })
    
    const borrar = D.create('a', {href: 'javascript:void(0)', innerHTML:
        'X',onclick: function(){D.remove(div_princ)}});

    D.append(span_pregunta, div_preguntaInt);
    
    D.append([div_preguntaInt,input_pregunta,btn_respuesta],div_pregunta);

    D.append([div_pregunta,borrar],div_princ);

    D.append(div_princ, D.id('contenedorPreguntas'));

    console.log(div_princ);

    
});

Respuesta.js

const btn_agregarRespuesta = document.getElementById('agregarR');
btn_agregarRespuesta.addEventListener('click', function(){

    
    const div_princ =btn_agregarRespuesta.closest('div').parentNode;

    console.log(div_princ); 

    const div_pregunta = D.create('div',{class:"input-group input-group-sm mb-3"});

    const div_preguntaInt = D.create('div',{class:"input-group-prepend"});

    
    const span_pregunta = D.create('span',{innerHTML: 'Respuesta',class:"input-group-text" ,id:"inputGroup-sizing-default"});
    
    const input_pregunta = D.create('input',{type:'text', name:'respuesta', class:'form-control'});

    const borrar = D.create('a', {href: 'javascript:void(0)', innerHTML:
        'X',onclick: function(){D.remove(div_princ)}});

    D.append(span_pregunta, div_preguntaInt);
    
    D.append([div_preguntaInt,input_pregunta],div_pregunta);

    D.append([div_pregunta,borrar],div_princ);

   
    console.log(div_princ);

});


Mi objetivo es que al crear una nueva pregunta me deje añadir respuestas como en la primera pregunta. Muchas gracias de antemano y estaré atento a sus respuestas.
