Envoyer le contenu d'un formulaire dynamique en XHR

Bonjour, je ne pense pas que mon titre soit clair aussi, vais-je expliquer mon problème plus en détail avant de vous montrer mon code. je précise que je n'aie pas un gros niveau de programmation et que c'est la première fois que je touche a des langages objets, j'ai pas mal cherché la solution a mon problème sur internet mais ne l'ait pas trouvé, je crains de ne pas savoir la reconnaître.


Donc en gros:
Je crée grâce à javascript un bouton qui me permet d'ajouter des champs de texte dans mon formulaire, ce que je n'arrive pas a faire c'est en récupérer les contenu (des textes que je voudrais envoyer en BDD via php)

je me suis tourné du coté du XHR (AJAX) qui me semble être la meilleure méthode pour transmettre des valeurs de js à PHP, cependant je n'arrive pas à récupérer correctement les contenu de mes champs de texte crées "onclick".

Je précise que le code pour créer le bouton et cloner le champ de texte je l'ai trouvé sur internet et adapté a mes besoins, néanmoins mes lacunes en js m'empêchent d'achever le traitement des données.

voici mon code:

 function ajout(element){


var formulaire = window.document.form1;
formulaire.setAttribute("method", "POST");
// On clone le bouton d'ajout
var ajout = element.cloneNode(true);
// Crée un nouvel élément de type "textarea"
var champ = document.createElement("textarea");
champ.setAttribute("id", "name", "rep", "rep");

// Les valeurs encodée dans le formulaire seront stockées dans un tableau
champ.name = "champ[]";
champ.type = "text";


// création des boutons pour savoir si la réponse est correcte
var selection = document.createElement('select');
option = document.createElement("option");
option.setAttribute("value", "0");
option.innerHTML=("réponse exacte");
selection.appendChild(option); 

option = document.createElement("option");
option.setAttribute("value", "1");
option.innerHTML=("réponse fausse");
selection.appendChild(option); 


//les valeurs des boutons serotn stockées dans un tableau
selection.value = "vBouton[]";

var sup = document.createElement("p");

// Ajout de l'événement onclick
sup.onclick = function onclick(event)
{suppression(this);};

// On crée un nouvel élément de type "p" et on insère le champ l'intérieur.
var bloc = document.createElement("p");
bloc.appendChild(champ);
bloc.appendChild(selection);
formulaire.insertBefore(ajout, element);
formulaire.insertBefore(sup, element);
formulaire.insertBefore(bloc, element);

// envoi des variables auserveur pour traitement php
var xhr = getXMLHttpRequest();
// préparation du serveur pour l'envoi de données
xhr.open("POST", "handlingData.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
encodeURIComponent(champ);
// travail sur les caractéres spéciaux pour le passage en post
for(i=0;i<champ.length();i++)
{

xhr.send(champ[i]);

}

}

je pense que mon procbléme viens du fait que je n'arrive pas a comprendre cette ligne:
champ.name = "champ[]";
si je comprend que champ est un tableau qui va contenir les valeur, ce que je ne comprends pas c'est comment manipuler ce tableau, j'entends par là que champ[0] me semble vide alors même que j'ai entré du texte dans le premier champ de texte.

pour les option du bouton select je ne m'en suis pas encore occupé (j'aborde un problème à la fois, mais une fois que j'aurais trouvé la méthode pour mon premier cas, je saurais faire pour le suivant.)


voilà, j'ai conscience que ma question semble flou, j'espère que vous pourrez m'aider, si la question a déjà été posée, je vous promet que j'ai déjà cherché, je pense juste être incapable de reconnaître la solution à mon problème.

merci a vous.