Afficher les info relatives à une option de select list

Bonjour,

J'ai un tableau html qui contient 6 colonnes (article , prix unitaire Hors Taxe, TVA, Quantité , Prix Total Hors Taxe, Prix Total TTC )
j'ai un bouton (+), lorsque je clique sur ce bouton , une ligne s'ajoute dans mon tableau , cette ligne contient une liste déroulante dynamique qui contient les articles qui existent dans ma base , dès que l'utilisateur choisit un article , le prix unitaire hors taxe et le TVA doivent s'afficher dans le tableau, ensuite l'utilisateur doit saisir la quantité, dès qu'il saisit la quantité le prix total hors taxe et le prix total ttc doivent être calculés et affichés dans le tableau,
J'ai réussi à ajouter une ligne à la fin du tableau lorsque l'utilisateur clique sur le bouton (+) , j'ai réussi aussi à mettre du contenu dynamique dans la liste déroulante , j'ai réussi à afficher le prix hors taxe , le tva de l'article à partir de la base mais ça retourne seulement le résultat de la premiere ligne , c à d : lorsque je clique plusieurs fois sur le bouton (+) , seulement les informations de la première ligne sont affichées , les autres lignes restent vides.
Je vous montre mon code afin de pouvoir m'aider :

var temp=["1 | TRAVAUX ","10 | TRAVAUX ","11 | TRAVAUX ","12 | TRAVAUX ","13 | TRAVAUX ","14 | TRAVAUX","15 | TRAVAUX ","16 | TRAVAUX ","17 | TRAVAUX","18 | TRAVAUX","19 | TRAVAUX","2 | TRAVAUX ","20 | TRAVAUX","21 | TRAVAUX","22 | TRAVAUX ","23 | TRAVAUX","24 | TRAVAUX","25 | TRAVAUX ","26 | TRAVAUX","27 | TRAVAUX","28 | TRAVAUX ","29 | TRAVAUX","3 | TRAVAUX ","30 | TRAVAUX","4 | TRAVAUX","5 | TRAVAUX ","6 | TRAVAUX ","7 | TRAVAUX ","8 | TRAVAUX ","9 | TRAVAUX ","ATO | ATOM EC 25","HIL | HILAC","KG | KILLER GEL ","KO  | KAO FOURMIE","P | POSTE D'APPAT","P1 | POSTE D'APPAT","PASS | TRAVAUX D'ASSAINISSEMENT (3D)","RAKP | RAKILL PELLET ","RAKPA  | RAKILL PATE","RAMB | RAMET BLOC ","RAMP | RAMET PELLET ","RAMPA | RAMET PATE ","RATB | RAKILL BLOC ","TEG  | TOUAREG EC 100"];
function AjouterArticle()
{
var newRow = document.getElementById("dataTables-example").insertRow(-1);
var AjoutEmp='<select name="Article[]" id="Article" style="border:0px" onChange="RecupererPUHTArticle(),RecupererTVAArticle()"> <option selected="Selected">--Choisir un article--</option>'; 

for (var cemp = 0; cemp < temp.length; cemp++)
 {
    var empi=temp[cemp];
    AjoutEmp+="<option>"+
    (empi)+
    "</option>";
};
var newCell=newRow.insertCell(0);
newCell.innerHTML=AjoutEmp;
var art=document.getElementById("Article").value;
newCell = newRow.insertCell(1); newCell.innerHTML = '<input type="text" name="PrixUnitHT[]" id="PrixUnitHT" style="border:0px" >';
newCell = newRow.insertCell(2); newCell.innerHTML = '<input type="text"  name="TVA[]"  id="TVA" style="border:0px">'; 
newCell = newRow.insertCell(3); newCell.innerHTML = '<input type="number" step="any"  name="Quantite[]"  id="Quantite" >'; 
newCell = newRow.insertCell(4); newCell.innerHTML = '<input type="text"   name="TotalHT[]"  id="TotalHT" style="border:0px">';
newCell = newRow.insertCell(5); newCell.innerHTML = '<input type="text"   name="TotalTTC[]"  id="TotalTTC" style="border:0px"  >';
}
 function RecupererPUHTArticle()
  { var art1= encodeURIComponent(document.getElementById("Article").value);       
      console.log("Article  :" + art1);
      var xhr = getXMLHttpRequest(); 
      xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
      console.log(xhr.responseText);
      //document.getElementById("raisonsociale").innerHTML=xhr.responseText;
      document.getElementById("PrixUnitHT").value=xhr.responseText;
    }
    else{
      if(xhr.status>=400){
        console.log(getXhrError(xhr.status));
      }
    }
  };  
  xhr.open("GET","RecupererPUHTArticle.php?art1="+art1,true);  
  xhr.send(null);
  }
  function RecupererTVAArticle()
  {
     { var art1= encodeURIComponent(document.getElementById("Article").value);       
      console.log("Article  :" + art1);
      var xhr = getXMLHttpRequest(); 
      xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
      console.log(xhr.responseText);
      //document.getElementById("raisonsociale").innerHTML=xhr.responseText;
      document.getElementById("TVA").value=xhr.responseText;
    }
    else{
      if(xhr.status>=400){
        console.log(getXhrError(xhr.status));
      }
    }
  };  
  xhr.open("GET","RecupererTVAArticle.php?art1="+art1,true);  
  xhr.send(null);
  }
  }
  function getXMLHttpRequest() {
  var xhr = null;   
  if (window.XMLHttpRequest || window.ActiveXObject) {
    if (window.ActiveXObject) {
      try {
          xhr = new ActiveXObject("Msxml2.XMLHTTP");
      } catch(e) {
          xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }
    } else {
        xhr = new XMLHttpRequest(); 
    }
  } else {
    alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
    return null;
  }
  return xhr;
}

<strong>  Articles :</strong>
<input type="button" name="ajout_article" onClick="AjouterArticle()" value="+" /> 
 <table class="table" id="dataTables-example">
     <thead>
        <tr>      
          <th>Article</th>
          <th>P.U HT</th> 
          <th>TVA</th>        
          <th>QTE </th>
          <th>P.T HT</th>
          <th>Total TTC</th>              
        </tr>
     </thead>
     <tbody>                                         
     </tbody>      
 </table>

EDIT : Ajout du LANGAGE dans les balises de code

QUAND VAS TU ENFIN COMMENCER A LES METTRE TOI MEME ???