1. <div class="info0..."></div><div class="info1..."></div><div class="info2..."></div>
2. ... repeat sim. line ...

I am trying to target the first and last lines of each class and change their borders.

2. var str1 = 'info';
3. for (i = 0; i < %id=infogroups%; i++) {
4.   console.log('Groups: ' + %id=infogroups%); // should always output the assigned value (3)
5.   var sel = str1 + i.toString();
6.   console.log('SelName: ' + sel); // should output 3 variables from loop , info0, info1 & info2
7.   var lineSel = $('div[class^="+sel+"]');
8.   lineSel.each(function(index) {
9.     if (index == 0) { /* target first info line */
10.       $(this).css({'border-top-color': 'transparent'})}  
11.     else if (index == lineSel.length-1) {  /* target last info line */
12.       $(this).css({'border-bottom-color': 'transparent'})} 
13.   });
14. }

First problem is that it's not changing the borders

Secondly, it's showing a final set of groups set to 5, There is a max of 5 that can be set but in this example, %id=infogroups% = 3  Not sure how loop can start running a value that's not assigned.

Thanks,  Bill