Greetings experts,

I received great help from Godsbest in getting the code below working:

1. $("#details").on("click", "a[target='tab']", function(){
     var me = $(this);
     var url = me.attr("href");
     var tabName = me.data("tabName");
     var tabIndex = parseInt(me.data("tabIndex"), 10);
     $.get(url, function(data) {
   var table = $( '<table id="details" class="details" style="font-weight:bold;font-size:10pt;" cellpadding="4" width="100%" cellspacing="0" />'),
       tr = $('<tr clss="d0"/>'),
       td = $('<td/>'),
       th = $('<th/>'),
       table2 = $('<table class="details" style="background-color:#eeeeee;" cellpadding="4" width="100%" bordercolor="cellspacing="0" />');
           tr = $('<tr clss="d1"/>'),
        td = $('<td/>'),
       th = $('<th/>'),
       table2.html(tr.clone());
     $.each(data[0], function(key,value) {
         if($.inArray(key, ['RequestID','RequestDate']) == -1) {
            tr.clone().html(th.clone().html( key.replace(/[a-z][A-Z]/g, function(s) { return s.split('').join(' '); })))
            .append(td.clone().html(value))
            .appendTo(table);
         } else {
           th.clone().html( key.replace(/[a-z][A-Z]/g, function(s) { return s.split('').join(' '); }))
           .appendTo(table2.find('tr'));
           td.clone().html(value).appendTo(table2.find('tr'));
         }
      });
      $(tabName).html(table2).append('<br>').append(table);
      $("table#details tr:even").css("background-color", "#eeeeee");
      $("table#details tr:odd").css("background-color", "#C0C0C0");
       // Activate the tab once the page has loaded:
       $("#tabs").tabs("option", "active", tabIndex);
       }, 'json');
        // Prevent the browser from following the link:
       return false;
       });
      });
   </script>

This code works great for what it is intended for.

For instance, it gives us the layout that we wanted and that layout is:

Request ID:          11222        Request Date:            01/01/2014

Then rest are displayed each record one line per record

This line of code displays Request ID and Request Date:

1.       if($.inArray(key, ['RequestID','RequestDate']) == -1) {
            tr.clone().html(th.clone().html( key.replace(/[a-z][A-Z]/g, function(s) { return s.split('').join(' '); })))

Now, they would like us to add two more fields just below RequestID and Request date so the new layout looks like the screenshot below:

Thanks a lot in advance