Dynamic Row addition to the Table

I want to add Array elements to the table.

Array elements are dynamic coming from the database. And i am creating the Row for adding the one row from the generated data and appending rowAfter to add the other array elements

Here is the code i have written -

                        var rowSpan = 0;
                        var rowSpan1 = 0;
                        for (element in data)
                        {
                            // get products into an array
                          var productsArray = data[element].products.split(',');
                          var QuantityArray = data[element].quantity.split(',');
                          var ChemistArray = data[element].Retailername.split(',');
                          var PobArray = data[element].Pob.split(',');

                          rowSpan = productsArray.length;
                          rowSpan1 = ChemistArray.length;

                         var row = '<tr>' +
                        '<td rowspan="'+rowSpan+'">' + data[element].date + '</td>'+
                        '<td rowspan="'+rowSpan+'">' + data[element].doctor_name + '</td>';

                         // loop through products array
                         var rowAfter = "";
                         for (var i = 0; i < rowSpan; i++) {
                         if(i == 0) {
                            row += '<td>' + productsArray[i] + '</td>';
                            row += '<td>' + QuantityArray[i] + '</td>';
                             } else {
                             rowAfter += '<tr><td>' + productsArray[i] + '</td><td>' + QuantityArray[i] + '</td>';
                           }
                        }

                        for (var k = 0; k < rowSpan1; k++) {
                        if(k == 0) {
                           row += '<td>' + ChemistArray[k] + '</td>';
                           row += '<td>' + PobArray[k] + '</td>';
                            } else {
                            rowAfter += '<td>' + ChemistArray[k] + '</td><td>' + PobArray[k] + '</td> </tr>';
                          }
                       }

                       row +=

                         '<td rowspan="'+rowSpan1+'">' + data[element].locations +'</td>'+
                         '<td rowspan="'+rowSpan1+'">' + data[element].area + '</td>'+
                         '</tr>';

                         $('#tbody').append(row+rowAfter);

So as per the code I can finely display ProductArray and Quantity Array

And But i am not able to display the Chemist array after one another.

In the above Image i want to display data( Kapila and Kripa below the Chemist column) Some where making issue with tr and td.

Any help would really appreciated.