How to to loop thru xml nodes

I have this xml data
<products>
<product year="1996" state="TX" rate="9.12"/>
<product year="1997" state="TX" rate="9.23"/>
<product year="1998" state="TX" rate="9.31"/>
<product year="1999" state="TX" rate="9.45"/>
<product year="2000" state="TX" rate="9.98"/>
<product year="2001" state="TX" rate="10.00"/>
<product year="1996" state="NJ" rate="8.34"/>
<product year="1997" state="NJ" rate="9.14"/>
<product year="1998" state="NJ" rate="9.32"/>
<product year="1999" state="NJ" rate="9.65"/>
<product year="2000" state="NJ" rate="9.75"/>
<product year="2001" state="NJ" rate="9.92"/>
</products>

Aftr reaching 4th year, next years should come in next row. Currently with my code the records are coming in single row per each state like this

  1996 1997 1998 1999 2000 2001
TX  9.12 9.23 9.31 9.45 9.98 10.00

 1996 1997 1998 1999 2000 2001
NJ  9.12 9.23 9.31 9.45 9.98 10.00


But I need the output like this...

  1996 1997 1998 1999
TX  9.12 9.23 9.31 9.45
  2000 2001  
  9.98 10.00  

NJ  1996 1997 1998 1999
  8.34 9.14 9.32 9.65
  2000 2001  
  9.75 9.92  

Here is my code

<xsl:key name="state" match="product" use="@state"/>
<xsl:key name="year" match="year" use="concat(@product, ':', @year)"/>
<xsl:key name="rate" match="rate" use="concat(@product, ':', @year,':',@rate)"/>

<table border="1" width="100%">
<tr>
<xsl:for-each select="products/products[generate-id()=generate-id(key('state',@state)[1]
)]">
<xsl:variable name="statecode" select="@state"/>
<td valign='bottom' width='20%' align='left'>
<xsl:value-of select="@state"/>
  </td>
<td colspan='4'>
<table border='1' width='100%' cellspacing='0' cellpadding='0' >
<tr>
<xsl:for-each select="../product[generate-id()=generate-id(key('ltv',concat(@state, ':', @year,':',@rate))[1])]">
<td valign='bottom' align='center' width='22%'>
<xsl:value-of select="@rate"/>
 </td>
</xsl:for-each>
</tr>
</table>

</td>
</tr>
</xsl:for-each>
</xsl:for-each>
</tr>
</table>