Cannot iterate all values of a subform in HTML view. Only the first one appear

Cannot iterate all values of a subform in HTML view. Only the first one appear

Dear Zoho team,

I am working on an HTML view (page) add it to a custom function in a report and it works fine.

It is a "Product_Offer_Sheet" HTML. It will fetch data from my Form "Create_Product"
No problem about that but in this HTML view, there is one table where I must display the composition of the product which is in a Subform "Composition" of the Form "Create_Product"

I did the following code but I can only see the first record of the subform

htmlpage Product_Offer_Sheet(id, hidePrint)
displayname = "Product Offer Sheet"
print = true
pdf = true
content
<%{
    rec  =  Create_Product  [ID == input.id.toLong()];
    for each i in rec.Composition
    {%>       


And then this is my code for the table that is suposed to display all records of Subform "Composition"      

         </tr>
        <tr style="height:18px;">
            <td style="padding: 2px 3px; background-color: rgb(192, 192, 192); border-right-width: 1px; border-right-style: solid; border-right-color: rgb(0, 0, 0); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(0, 0, 0); border-left-width: 1px; border-left-style: solid; border-left-color: rgb(0, 0, 0); font-size: 80%; font-weight: bold; white-space: nowrap; vertical-align: middle; text-align: center;" rowspan="1" colspan="3" data-sheets-value="[null,2,&quot;Material&quot;]" data-sheets-numberformat="[null,2,&quot;_-* #,##0\\ _B_F_-;\\-* #,##0\\ _B_F_-;_-* ">Material</td>
            <td style="padding: 2px 3px; background-color: rgb(192, 192, 192); border-right-width: 1px; border-right-style: solid; border-right-color: rgb(0, 0, 0); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(0, 0, 0); font-size: 80%; font-weight: bold; white-space: nowrap; vertical-align: middle; text-align: center;" rowspan="1" colspan="2" data-sheets-value="[null,2,&quot;Size&quot;]" data-sheets-numberformat="[null,2,&quot;_-* #,##0\\ _B_F_-;\\-* #,##0\\ _B_F_-;_-* ">Size</td>
            <td style="padding: 2px 3px; background-color: rgb(192, 192, 192); border-right-width: 1px; border-right-style: solid; border-right-color: rgb(0, 0, 0); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(0, 0, 0); font-size: 80%; font-weight: bold; white-space: nowrap; vertical-align: middle; text-align: center;" rowspan="1" colspan="4" data-sheets-value="[null,2,&quot;Finishing&quot;]" data-sheets-numberformat="[null,2,&quot;_-* #,##0\\ _B_F_-;\\-* #,##0\\ _B_F_-;_-* ">Finishing</td>
            <td style="padding: 2px 3px; background-color: rgb(192, 192, 192); border-right-width: 1px; border-right-style: solid; border-right-color: rgb(0, 0, 0); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(0, 0, 0); font-size: 80%; font-weight: bold; white-space: nowrap; vertical-align: middle; text-align: center;" rowspan="1" colspan="6" data-sheets-value="[null,2,&quot;Percentage of weight&quot;]" data-sheets-numberformat="[null,2,&quot;_-* #,##0\\ _B_F_-;\\-* #,##0\\ _B_F_-;_-* ">Percentage of weight</td>
        </tr>
        <tr style="height:18px;">
            <td style="padding: 2px 3px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(0, 0, 0); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(0, 0, 0); border-left-width: 1px; border-left-style: solid; border-left-color: rgb(0, 0, 0); font-size: 80%; white-space: nowrap; vertical-align: middle; text-align: center;" rowspan="1" colspan="3" data-sheets-value="[null,2,&quot;Material&quot;]" data-sheets-numberformat="[null,2,&quot;_-* #,##0\\ _B_F_-;\\-* #,##0\\ _B_F_-;_-* "><%=i.Material%></td>
            <td style="padding: 2px 3px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(0, 0, 0); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(0, 0, 0); font-size: 80%; white-space: nowrap; vertical-align: middle; text-align: center;" rowspan="1" colspan="2" data-sheets-value="[null,2,&quot;Size&quot;]" data-sheets-numberformat="[null,2,&quot;_-* #,##0\\ _B_F_-;\\-* #,##0\\ _B_F_-;_-* "><%=i.Size%></td>
            <td style="padding: 2px 3px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(0, 0, 0); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(0, 0, 0); font-size: 80%; white-space: nowrap; vertical-align: middle; text-align: center;" rowspan="1" colspan="4" data-sheets-value="[null,2,&quot;Finishing&quot;]" data-sheets-numberformat="[null,2,&quot;_-* #,##0\\ _B_F_-;\\-* #,##0\\ _B_F_-;_-* "><%=i.Finishing%></td>
            <td style="padding: 2px 3px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(0, 0, 0); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(0, 0, 0); font-size: 80%; white-space: nowrap; vertical-align: middle; text-align: center;" rowspan="1" colspan="6" data-sheets-value="[null,2,&quot;Percentage_of_weight&quot;]" data-sheets-numberformat="[null,2,&quot;_-* #,##0\\ _B_F_-;\\-* #,##0\\ _B_F_-;_-* "><%=i.Percentage_of_weight%></td></tr>
        </tr>
        <tr style="height:18px;">
            <td style="padding: 2px 3px; vertical-align: bottom; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(0, 0, 0); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(0, 0, 0); border-left-width: 1px; border-left-style: solid; border-left-color: rgb(0, 0, 0);" rowspan="1" colspan="3" data-sheets-numberformat="[null,2,&quot;_-* #,##0\\ _B_F_-;\\-* #,##0\\ _B_F_-;_-* ">&nbsp;</td>
            <td style="padding: 2px 3px; vertical-align: bottom; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(0, 0, 0); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(0, 0, 0);" rowspan="1" colspan="2" data-sheets-numberformat="[null,2,&quot;_-* #,##0\\ _B_F_-;\\-* #,##0\\ _B_F_-;_-* ">&nbsp;</td>
            <td style="padding: 2px 3px; vertical-align: bottom; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(0, 0, 0); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(0, 0, 0);" rowspan="1" colspan="4" data-sheets-numberformat="[null,2,&quot;_-* #,##0\\ _B_F_-;\\-* #,##0\\ _B_F_-;_-* ">&nbsp;</td>
            <td style="padding: 2px 3px; vertical-align: bottom; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(0, 0, 0); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(0, 0, 0);" rowspan="1" colspan="6" data-sheets-numberformat="[null,2,&quot;_-* #,##0\\ _B_F_-;\\-* #,##0\\ _B_F_-;_-* ">&nbsp;</td>
        </tr>     

Do you know what did I do wrong?

Thank in advance

Julien