Create dynamic table: a section with a heading/label - its related dynamic rows, columns and then again another section similarly

Question

I am trying to create a dynamic table with the below layout when I click on a button (I am unable to attach an image, so showing below sample code which is just an example to get an idea of what I am trying for but I want everything dynamic in the actual scenario).

<table>
    <th colspan="2">Group1</th>
    <tr> <td> section1a</td> <td> staff1a</td> </tr>
    <tr> <td> section1b</td> <td> staff1b</td> </tr>
    <tr> <td> section1c</td> <td> staff1c</td> </tr>
    <th colspan="2">Group2</th>
    <tr> <td> section2a</td> <td> staff2a</td> </tr>
    <tr> <td> section2b</td> <td> staff2b</td> </tr>
    <tr> <td> section2c</td> <td> staff2c</td> </tr>
</table>

I am using Javascript, Ajax and PHP as backend. I am creating div, table, th, tr, td tags, using document.createTextNode, appendChild methods but only the last value in the array is getting appended and I am getting something like below:

<div> <div> Group1 </div> <div> Group2 </div> </div>
<table> <tr> <td>section1c </td> </tr> <tr> <td> section2c </td> </tr>

My actual code:

var dvContainer=document.getElementById('dvContainer');
            var div= document.createElement('div');   
            $.ajax({
                  url: 'data.php',
                  method:'post',
                  data:'selectedDivHome=' + selectedDivHome
              }).done(function(groupsHome){
                  console.log(groupsHome);
                  groupsHome=JSON.parse(groupsHome);
            for (var i = 0; i < groupsHome.length; i++){
                var divgrp= document.createElement('div');                
                var grpHomeid= groupsHome[i].groupid;
                var textnodegrp= document.createTextNode((groupsHome[i].groupdesc));
                divgrp.appendChild(textnodegrp);
                div.appendChild(divgrp);
                $.ajax({
                url: 'data.php',
                method:'post',
                data:'grpHomeid=' + grpHomeid
                    }).done(function(sectionsHome){
                console.log(sectionsHome);                       
                sectionsHome=JSON.parse(sectionsHome);
                    for (var j = 0; j < sectionsHome.length; j++){
                        var table= document.createElement('TABLE');
                        var tr= document.createElement('tr');
                        var td= document.createElement('td');
                        var textnodetr= document.createTextNode(sectionsHome[j].sectiondesc);
                        td.appendChild(textnodetr);
                        tr.appendChild(td);
                        table.appendChild(tr);                       
                    }
                    div.appendChild(table);                   
                });                    

                dvContainer.appendChild(div);  
            }
         });

Answer 1

Using Ajax calls in for loop is a bad idea. When the browser executes the $.ajax method it continues to run next lines of codes so right after your $.ajax call the browser continues the for loop and randomly (depending on network lag and server processing time) the ajax result comes back and done method will be executed. The done method steals the executing pointfrom your for loop . So random unexpected things will happen. Keep in mind the followings:

1. An ajax call must be the last piece of code that should be executed before it result come back from server.
2. So the next ajax call must be executed in ajax success(done) or error function which means after result came back.