Pointers/hjælp til formatering af nestede arrays (jQuery, ajax, json)

Hej Eksperter,

Her følger en jQuery iteration over et knap så velformateret json response (kan jeg desværre ikke gøre noget ved):

  $(".getData").click(function() {
    cusId=$(this).attr('id');//get cusId from DOM
    var inputs = {};
    inputs.domain = $('#domain').val();//fra formen der henter data - ikke vigtigt her
    inputs.month = $('#month').val();//fra formen der henter data - ikke vigtigt her
    inputs.custid = cusId;//fra formen - skal bruges til at hente specifikt datasæt

    controller.Name().ajax({
      contentType: "application/json",
      processData: false,
      data: JSON.stringify(inputs),
      success: function(data) { //data fra response
        var tr;
        $.each(data, function(i, item) {//start iteration over arrays
        if(data[i].typeDetails != null) {
          var typeDetailsTEMP = data[i].typeDetails;
          for(var j=0; j<typeDetailsTEMP.length; j++) {
            if(typeDetailsTEMP[j].prodDetail != null) {
              var prodDetailTEMP = typeDetailsTEMP[j].prodDetail;
              for(var m=0; m<prodDetailTEMP.length; m++) {
                tr = $('<tr>');
                tr.append("<td>" + prodDetailTEMP[m].type + "</td><td>" + prodDetailTEMP[m].name + "</td><td>" + prodDetailTEMP[m].prodId + "</td>"); //hent værdierne op igennem arrays og append til tr
                if(prodDetailTEMP[m].intervalDetails != null) {
                  var intervalDetailsTEMP = prodDetailTEMP[m].intervalDetails;
                  for(var k=0; k<intervalDetailsTEMP.length; k++) {
                    tr.append("<td><p>Fra</p>" + intervalDetailsTEMP[k].from + "<p>Til</p>" + intervalDetailsTEMP[k].to + "</td>"); //append records til tr
                    $("tr[id^='setA_" + cusId + "']").after(tr); //tilføj tr's til den specifikke tr hvorfra click funktionen er kaldt
                  }
                }
              }
            }
          }
        }
      });
    }
  });
});

Stadig med?

Dette fungerer helt fint og smider data i nye <tr>'s EFTER <tr> med id der starter med setA_

Selve strukturen ser sådan ud:

<table>
  <tr id="setA_1"> <!--"1"-tallet her er variabel, tr'en er "hardkodet" i DOM'en-->
    <td><a href="#" id="1" class="getData">trigger click funktion</a></td>
    <td>Noget tekst</td>
  </tr>
  <tr> <!--Her er første række data fra .click funktionen-->
  <td>data</td>
  ...
  </tr>
  <tr> <!--Her er næste række data fra .click funktionen-->
  <td>data</td>
  ...osv
  </tr>
  <tr id="setA_2"> <!--"2"-tallet her er variabel, tr'en er "hardkodet" i DOM'en-->
    <td><a href="#" id="1" class="getData">trigger click funktion</a></td>
    <td>Noget tekst</td>
  </tr>
</table>

Dér hvor jeg nu går død, er at jeg helst vil have mine datarows "pakket" ind i en table eller et block element...hvad som helst egentlig.

Dvs. at DOM'en helst skulle se sådan ud efter .click:

<table>
  <tr id="setA_1">
    <td><a href="#" id="1" class="getData">trigger click funktion</a></td>
    <td>Noget tekst</td>
  </tr>
  <div> <!--whatever, det vigtigste er, at dette element pakker hele iterationen ind-->
  <table>
    <tr>
      <td>data</td>
      ...
    </tr>
    <tr>
      <td>data</td>
      ...osv
    </tr>
  </table>
  </div>
  <tr id="setA_2"> <!--"2"-tallet her er variabel, tr'en er "hardkodet" i DOM'en-->
    <td><a href="#" id="1" class="getData">trigger click funktion</a></td>
    <td>Noget tekst</td>
  </tr>
</table>

Håber dette giver bare en smule mening...kort sagt er mit problem, at få smidt et eller andet container element udenom outputtet fra iterationen (evt. direkte i DOM'en) - og så appende (eller whatever) data i dette.

Kickeren er bare, at elementet SKAL indsættes efter <tr id="getA_1/2/etc"> alt efter hvilken .click der triggers fra.

Har stirret mig blind på det - gode pointers og braining over det modtages med glæde.