title: Dynamically add new tables and rows querying XML source with Javascript and PHP
body: <p>I am programming a webservice that queries different databases for prices. The web service writes a new <code>&lt;Result&gt;</code> node into the <code>XML</code> page that is given back when calling <code>http://service.com/xml.php?search=carpet</code> as soon as it has results from the database. Unfortunately the queries sent to the various databases take extremely long (up to 30 seconds total). Obviously I dont want the user to wait for 30 seconds, then give back the XML and build a table with this data; I want it to dynamically load.</p>
  
  <p>Let's assume a user searches for <em>"Carpet"</em>, the databases will give back multiple products such as <em>"Red Carpet"</em> and <em>"Yellow Carpet"</em>. <em>"Red Carpet"</em> has two Distributors that are dynamically loaded into the table of <em>"Red Carpet"</em>. <em>"Yellow Carpet"</em> only has one distributor.</p>
  
  <p>I need a price comparison Table like the one shown in the below picture that dynamically adds a new table if a new article is given back and that adds a new line to the table if a new distributor is found for a product.</p>
  
  <p>Do you have suggestions on how to accomplish this? How do I receive only the data that has changed from my xml.php?</p>
  
  <p><strong>Price Comparison Table Structure</strong></p>
  
  <p><img src="https://i.stack.imgur.com/HOfSa.png" alt="price comparison table structure"></p>
  
  <p><strong>XML Data</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;Results&gt;
  &lt;!--Given back within 5 seconds--&gt;
  &lt;Result&gt;
      &lt;ArticleNumber&gt;Red Carpet&lt;/ArticleNumber&gt;
      &lt;Manufacturer&gt;Big Carpet Inc&lt;/Manufacturer&gt;
      &lt;Distributor&gt;Amazonas&lt;/Distributor&gt;
      &lt;Prices&gt;
          &lt;Pricebreak&gt;
              &lt;Quantity&gt;1&lt;/Quantity&gt;
              &lt;Price&gt;$ 1.20&lt;/Price&gt;
          &lt;/Pricebreak&gt;
          &lt;Pricebreak&gt;
              &lt;Quantity&gt;10&lt;/Quantity&gt;
              &lt;Price&gt;$ 1.00&lt;/Price&gt;
          &lt;/Pricebreak&gt;
          &lt;Pricebreak&gt;
              &lt;Quantity&gt;100&lt;/Quantity&gt;
              &lt;Price&gt;$ 0.50&lt;/Price&gt;
          &lt;/Pricebreak&gt;
      &lt;/Prices&gt;
  &lt;/Result&gt;
  &lt;!--Given back within another 10 seconds--&gt;
  &lt;Result&gt;
      &lt;ArticleNumber&gt;Red Carpet&lt;/ArticleNumber&gt;
      &lt;Manufacturer&gt;Big Carpet Inc&lt;/Manufacturer&gt;
      &lt;Distributor&gt;Veritas&lt;/Distributor&gt;
      &lt;Prices&gt;
          &lt;Pricebreak&gt;
              &lt;Quantity&gt;1&lt;/Quantity&gt;
              &lt;Price&gt;$ 0.90&lt;/Price&gt;
          &lt;/Pricebreak&gt;
          &lt;Pricebreak&gt;
              &lt;Quantity&gt;5&lt;/Quantity&gt;
              &lt;Price&gt;$ 0.70&lt;/Price&gt;
          &lt;/Pricebreak&gt;
      &lt;/Prices&gt;
  &lt;/Result&gt;
  &lt;!--Given back within another 5 seconds--&gt;
  &lt;Result&gt;
      &lt;ArticleNumber&gt;Yellow Carpet&lt;/ArticleNumber&gt;
      &lt;Manufacturer&gt;Smallrug Corporation&lt;/Manufacturer&gt;
      &lt;Distributor&gt;Veritas&lt;/Distributor&gt;
      &lt;Prices&gt;
          &lt;Pricebreak&gt;
              &lt;Quantity&gt;1&lt;/Quantity&gt;
              &lt;Price&gt;$ 3.90&lt;/Price&gt;
          &lt;/Pricebreak&gt;
          &lt;Pricebreak&gt;
              &lt;Quantity&gt;10&lt;/Quantity&gt;
              &lt;Price&gt;$ 2.70&lt;/Price&gt;
          &lt;/Pricebreak&gt;
      &lt;/Prices&gt;
  &lt;/Result&gt;
  &lt;/Results&gt;
  </code></pre>