Help with using the Javascript IOL technique

I followed the help from this tutorial to try to replicate the IOL technique:

https://community.quickbase.com/quickbase/topics/how-to-use-javascript-to-concat-child-records-into-...

I used the formula found here:

https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=464&_ga=2.97266711.966581701...

my end goal is to add the child records to display like in Dan Diebolt'z example:


My components:

iol:  <img qbu='module' src='/i/clear2x2.gif' onload="javascript:if(typeof QBU=='undefined'){QBU={};$.getScript(gReqAppDBID+'?a=dbpage&pagename=

/iol:    &rand='+new Date().getTime())};">

Child formula field: 

[iol] & "Childs.js" & [/iol]
&
"<div class=QBU_Childs data-rid=" & [Record ID#] & "></div>"

Javascript variable page titled "Childs.js". The parameters are deleted in this but are in our code and match up:



(function(){


  $("img[qbu=module]").remove();


//parameters:
  var dbid = "";
  var dbidParents = "";
  var dbidChilds = "";
  var apptoken = "";
  var n = 100;
  var relatedParentFid = "8";
  var relatedParentLabel = "Related Parent";
  var clist = "";
  var qbuClass = "QBU_Childs";
  var template = "<ul>{{#.}}<li>{{comment}}</li>{{/.}}</ul>";   

  $.ajaxSetup({data: {apptoken: apptoken}});


  var rids = $("div.QBU_Childs").map(function() {
    return this.dataset.rid;
  }).get();


  _.chain(rids).groupBy(function(element, index){
    return Math.floor(index/n);
  }).toArray().each(function(rids, index) {


    $.ajax({
      url: dbidChilds,
      data: {
        act: "API_DoQuery",
        clist: clist,
        query: ridsToQuery(rids, relatedParentFid)
      },
      dataFilter: XMLFlatToObj 
    }).then(function(resp) {
      _.chain(resp.records).groupBy(function(items) {
        return items[relatedParentLabel];
      }).each(function(item, rid) {
        var markup = Mustache.render(template, item);
        $("div." + qbuClass + "[data-rid=" + rid + "]").html(markup);
      });        
    });


  });  


  function XMLFlatToObj(xml, type) {
    var data = [];
    var record = {};
    $("record", xml).each(function() {
      record = {};
      $(this).children().each(function () {
        record[$(this).prop("tagName")] = $(this).text();
      });
      data.push(record);
    });
    return {records: data};
  }


  function ridsToQuery(rids, fid) {
    fid = fid || "3";
    return "{" + fid + ".EX." + rids.join("}OR{" + fid + ".EX.") + "}";
  }


})();


Here is my final result:

_

when in theory it would have both of those records located there. Any help or input would be greatly appreciated!