I have an ArrayList inside a Form and I can not retrieve all the data inside through a loop iteration and I don't know why. In my example the ArrayList has 3 elements and trying this the result is as I expected:

var id = ${ScheduleForm.reportGroups.get(0).id};        
var desc = '${ScheduleForm.reportGroups.get(0).description}';
var id2 = ${ScheduleForm.reportGroups.get(1).id};       
var desc2 = '${ScheduleForm.reportGroups.get(1).description}';
var id3 = ${ScheduleForm.reportGroups.get(2).id};       
var desc3 = '${ScheduleForm.reportGroups.get(2).description}';

console.log(id + " " + desc);   
console.log(id2 + " " + desc2); 
console.log(id2 + " " + desc3);

Result:

0 desc0
1 desc1
2 desc2

Problems occurs when I try this:

    var size = ${ScheduleForm.reportGroups.size()};
    for (var i = 0; i < size; i++) {
        id = ${ScheduleForm.reportGroups.get(i).id};        
        desc = '${ScheduleForm.reportGroups.get(i).description}';
        
        console.log(i + "> " + id + " " + desc);        
    }

Result is the following:

 0> 0 desc0
 1> 0 desc0
 2> 0 desc0

Why my loop is returning always the first element despite the index being properly used?

I really appreciate any help you can provide.