1 to n relationship between xml principal records

On here again with another (rather) "small" request. It's related with ones presented through my previous topics over here:

XSLT get some calculated node value over next line node's value (part I)

XSLT paged display some calculated node values along with previous line values retrieved over next line (II) (part II)

There is an .xml file which could be checked for there and also the associated .xsl file through which all these upkeep bills are properly displayed. That .xml file is depicted in there through second link provided. Also the associated .xsl I'll put it here further down ... So far so good.

But if one'll closely check that .xml will notice that every single upkeep record has one, two or even three receipts through which some payments were made. Say for instance, O'll take first line, one'll learn that for month_year = 11_16-12_16 there is a monthly amount to pay of 77 and this amount was partly paid up on two receipts: receipt dte="01-26-17" no=5725 amount = 22 and receipt dte="01-26-17" no=5726 amount = 41 (of course there is a 36 balance remaining .. but that's of less importance here.) Same thing goes for the others monthly share as well.

The point here is there would be 1 to n relationship between that monthly Upkeep Share (upkShare) and the number of receipts through which that particular payment has been made. For this respect now I need to display (through another xslt procedure) all those records as they are already displayed but along with some small cross placed (somewhere) over this line's far left side; and when clicked on it, it'll open another small table with the receipts related on this Upkeep Share record. This operation resembles accordion like behaviour. Plus sign clicked, another html related receipts table expanded; and so that plus sign it will turn into a minus sign. And by clicking that minus sign all that recepits related (html) table will eventually collapses; showing again only that Upkeep Share lines condensed.

Anyway I just made some similar example through some jqGrid little app which I put up over some fiddle. One could check it out here:

https://jsfiddle.net/MrcaS48/6Ljv0xoh/164

And there by checking that line one should really get exactly what's all about. On a nutshell there are three main things this .xslt should do:

displaying my upkeep share bills - does it already
that displaying make it paged - does it already
doing that 1 to n relationship between the principal record line (monthly Upkeep Share) and the second one which is the receipts through which all payments are made; that accordion like effect of further opening the lines receipts by clicking that plus sign placed over left far side of each principal line record - to do !! Following I'll show the .xsl file which already does the jobs previously mentioned at 1 and 2. Point 3 is about to be set up.

.xsl code

 <?xml version="1.0" encoding="UTF-8" ?>
    <xsl:stylesheet version="1.0" 
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
   xmlns:exsl="http://exslt.org/common" extension-element-prefixes="exsl">
    <xsl:strip-space elements="*"/> <xsl:decimal-format name="coerce" NaN="0"/>
    <xsl:variable name="upkshr">    <!-- upkshr -->
    <xsl:for-each select="*/upkShare"> 
     <upkp pstdte="{@post_dte}" rltedmnthyr = "{@month_year}" ob = "{format-number(OpngBlnce, '#', 'coerce')}"
  mcamnt = "{format-number(mnthCrrntAmnt, '#','coerce')}" term = "{@due}" rcptsum = "{format-number(sum(Rcpt/amnt), '#','coerce')}" /> <!-- missing ob node's value forced to zero -->
</xsl:for-each> 
</xsl:variable> 
<xsl:param name="size" select="4"/>
<xsl:template match="upkeepList">
 <xsl:variable name="upkp-set" select="exsl:node-set($upkshr)/upkp"/>

<html> 
  <head>  
  <script type="text/javascript" src="js/scrpt_pagn.js"></script> 
  <h3 style="margin-left:320">Upkeep share bills list</h3>
  </head> 
  <body onload="onInit()">
  <xsl:apply-templates select="$upkp-set[position() mod $size = 1]">
   <xsl:with-param name="pages" select="ceiling(count($upkp-set) div $size)"/>
  </xsl:apply-templates>
 </body>
 </html>
 </xsl:template>
 <xsl:template match="upkp"> <xsl:param name="pages"/>
 <xsl:variable name="page" select="position()"/>

 <table border="1" id='content{$page}' display:none">
  <tr bgcolor="#9acd32">
   <th>UpkpShare_Prd</th> <th>PostDate</th> <th>InitBalance</th> 
   <th>UpkpShare_Amnt</th> <th>DueDate</th> <th>FullAmnt</th> 
   <th>FullAmntPayed</th> <th>AmntDue</th>
  </tr>

  <xsl:for-each select=". | following-sibling::upkp[position()&lt;$size]">
  <xsl:variable name="initblnc" select="sum(preceding-sibling::upkp/@ob) + sum(preceding-sibling::upkp/@mcamnt) - sum(preceding-sibling::upkp/@rcptsum) + @ob" />  
  <tr>
  <td><xsl:value-of select="@rltedmnthyr"/></td> 
  <td><xsl:value-of select="@pstdte"/></td>  
  <td><xsl:value-of select="$initblnc"/></td>
  <td><xsl:value-of select="@mcamnt"/></td>
  <td><xsl:value-of select="@term"/></td>  
  <td><xsl:value-of select="$initblnc + @mcamnt"/></td> 
  <td><xsl:value-of select="@rcptsum"/></td> 
  <td><xsl:value-of select="$initblnc + @mcamnt - @rcptsum"/> </td> 
  </tr>
  </xsl:for-each>

  <tr>
   <td colspan="8"> 
     <xsl:choose>
      <xsl:when test="$page = 1">
      <xsl:text>pag</xsl:text> <xsl:text> </xsl:text>
      <xsl:value-of select="$page"/>
      <xsl:value-of select="'/'"/>      
      <xsl:value-of select="$pages"/>      
      <xsl:value-of select="' '"/>
      <a href="#{$page+1}" onclick="nextPage({$page+1})">&gt;</a>
     </xsl:when>
     <xsl:when test="$page = $pages">
     <xsl:value-of select="' '"/>
     <a href="#{$page - 1}" onclick="prevPage({$page - 1})">&lt;</a>      
     <xsl:text> </xsl:text> <xsl:text>pag</xsl:text>  
     <xsl:value-of select="' '"/> 
     <xsl:value-of select="$page"/>
     <xsl:value-of select="'/'"/>  
     <xsl:value-of select="$pages"/>
     </xsl:when>
     <xsl:otherwise>
     <a href="#{$page - 1}" onclick="prevPage({$page - 1})">&lt;</a>
     <xsl:text> </xsl:text> <xsl:text>pag</xsl:text>
     <xsl:value-of select="' '"/>      
     <xsl:value-of select="$page"/>      
     <xsl:value-of select="'/'"/> 
     <xsl:value-of select="$pages"/>
     <xsl:value-of select="' '"/>
     <a href="#{$page+1}" onclick="nextPage({$page+1})">&gt;</a>
    </xsl:otherwise>
    </xsl:choose>
   </td> </tr> 
  </table>   
 </xsl:template>
</xsl:stylesheet>

And there is that .js file which is also presented over that previous topic link. This would be all. You guys please help me with this. I'd really appreciate it a great deal. Thanks in advance.