Looping SSJS to output Ampscript variables partially works if I don't use a word building array function. Can't figure out why

Question

I've got a data extension which has multiple rows for each item a user has in their cart and it's tied to their email address. The main issue is I need to cut off the product name at a max character count of 20, but also not cut off a word so that an unfortunate "Assorted" becomes "A**" and I don't think there's a way to do that in ampscript so I did a lot of the logic in SSJS and outputted the variables to Ampscript to further loop through. What I'm noticing is if I hardcode a product name it will loop through all rows and output them with the hardcoded string, but if I use the function "lengthOfLastWord" I built, it will only output one row (of two items). There's another part to the logic that is irrelevant currently, but that if there's an odd number of rows it displays the last single item as a row of one.

Anyway, can someone see if they can tell what I'm doing wrong with that function that seems to break the loop after one row? Thank you!

    Platform.Load("core","1");
    
    var email = "[email protected]";
    var OrdersDE = DataExtension.Init("abandon_cart");
    var rows = OrdersDE.Rows.Lookup(["EMAIL"], [email]);
    var finalRowsLength = rows.length;
    var rowsLength = rows.length;
    var firstProductName = "";
    var firstProductItemNo = "";
    var firstProductSize = "";
    var firstProductImage = "";
    var secProductName = "";
    var secProductItemNo = "";
    var secProductSize = "";
    var secProductImage = "";
    var finalProductName = "";
    var finalProductItemNo = "";
    var finalProductSize = "";
    var finalProductImage = "";
     String.prototype.trim = function () {
return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
     function lengthOfLastWord(s) {
     var sArr = s.trim().split(' ');
     var finalName = "";
     var charCount = 0;
        if(sArr.length === 0 || s.length <= 20){
            return s;
        } else {
          for (i = 0; i < sArr.length; i++) {
                charCount = finalName.length;
                var countPlusLast = charCount + sArr[i].length;
                if(charCount < 21 && countPlusLast < 21) {
                    finalName = finalName.concat(sArr[i]);
                    if(countPlusLast < 20) {
                        finalName = finalName.concat(" ");
                    } else {
                      return finalName + "...";
                    } 
                } else {
                    return finalName + "...";
                }
            }
        return finalName;
        }
    };
    
    if (rowsLength % 2 != 0){
      var finalName = lengthOfLastWord(rows[rowsLength-1]["ProductName"]);
        Platform.Variable.SetValue("@finalProductName", finalName);
      Platform.Variable.SetValue("@finalProductItemNo",rows[rowsLength-1]["Item_No"]);
      Platform.Variable.SetValue("@finalProductSize",rows[rowsLength-1]["Size"]);
      finalRowsLength = rows.length - 1;
    }
    Write(finalRowsLength);
    if(finalRowsLength > 1) {
      var firstImage = "imagecdn" + rows[i]["Item_No"];
      var secImage = "imagecdn" + rows[i+1]["Item_No"];
      for (i = 0; i < rows.length; i+= 2) {
        firstImage = ""
        var firstName = lengthOfLastWord(rows[i]["ProductName"]);
          Platform.Variable.SetValue("@firstProductName", firstName);
        Platform.Variable.SetValue("@firstProductItemNo",rows[i]["Item_No"]);
        Platform.Variable.SetValue("@firstProductSize", rows[i]["Size"]);
        Platform.Variable.SetValue("@firstProductImage",firstImage);
        var secName = lengthOfLastWord(rows[i+1]["ProductName"]);
          Platform.Variable.SetValue("@secProductName",secName);
        Platform.Variable.SetValue("@secProductItemNo",rows[i+1]["Item_No"]);
        Platform.Variable.SetValue("@secProductSize",rows[i+1]["Size"]);
        Platform.Variable.SetValue("@secProductImage",secImage);

</script>
<tr>
    <td>
        <tr>
          <th><table>
              <tr>
                <td><img src="%%=v(@firstProductImage)=%%" width="168" height="168" alt="" border="0" style="display: block;" /></td>
              </tr>
            <tr>
                <td align="center" valign="top" style="font-family: Trebuchet, Helvetica; font-size: 15px; line-height: 25px; color: #757575; padding-top: 15px;">%%=v(@firstProductSize)=%% &nbsp;&bull;&nbsp; %%=v(@firstProductItemNo)=%%</td>
              </tr>
              <tr>
                <td align="center" valign="top" style="font-family: Trebuchet, Helvetica; font-size: 18px; line-height: 24px; color: #252424; padding-top: 25px;">%%=v(@firstProductName)=%%</td>
              </tr>
              
            </table>
          </th>
          <td width="64" align="left" valign="top" style="line-height: 0px; font-size: 0px;" class="hide"></td>
          <th width="245" align="center" valign="top" class="th_columns" style="padding: 0px; margin: 0px; font-weight:normal;"><table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" class="content_254">
              <tr>
                <td align="center" valign="top" style="line-height: 0px; font-size: 0px;"><img src="%%=v(@secProductImage)=%%" width="168" height="168" alt="" border="0" style="display: block;" /></td>
              </tr>
            <tr>
                <td align="center" valign="top" style="font-family: Trebuchet, Helvetica; font-size: 15px; line-height: 25px; color: #757575; padding-top: 15px;">%%=v(@secProductSize)=%% &nbsp;&bull;&nbsp; %%=v(@secProductItemNo)=%%</td>
              </tr>
              <tr>
                <td align="center" valign="top" style="font-family: Trebuchet, Helvetica; font-size: 18px; line-height: 24px; color: #252424; padding-top: 25px;">%%=v(@secProductName)=%%</td>
              </tr>
              
            </table>
          </th>
        </tr>
      </table></td>
  </tr>

<script runat="server">

      }
      //Write(productArray[0][Name]);
    }
    else {
       Write("Messed Up");
    }
    
    </script>


  <!-- END CONTENT BLOCK 1 --> 
  <!-- START CONTENT BLOCK 3 -->

%%[IF @finalProductName == "" THEN]%%
  <tr>
    <td align="center" valign="top" style="padding-bottom: 60px;"><table role="presentation" width="254" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center" valign="top" style="line-height: 0px; font-size: 0px;"><img src="%%=v(@finalProductImage)=%%" width="168" height="168" alt="" border="0" style="display: block;" /></td>
        </tr>
        <tr>
          <td align="center" valign="top" style="font-family: Trebuchet, 'Trebuchet MS', Verdana, 'sans-serif', Helvetica; font-size: 18px; line-height: 24px; color: #252424; padding-top: 25px;">%%=v(@finalProductName)=%%</td>
        </tr>
        <tr>
          <td align="center" valign="top" style="font-family: Trebuchet, 'Trebuchet MS', Verdana, 'sans-serif', Helvetica; font-size: 15px; line-height: 25px; color: #757575; padding-top: 15px;">%%=v(@finalProductSize)=%% &nbsp;&bull;&nbsp; %%=v(@finalProductItemNo)=%%</td>
        </tr>
      </table></td>
  </tr>
%%[ENDIF]%%```

Answer 1

You can do this via AMPscript. You just use BuildRowsetFromString() a For loop and an IF statement.

Example on MCSnippets: https://mcsnippets.herokuapp.com/s/RkwWHreE

And here is example code:

%%[

set @productName = "Large Leisure and Lovely Assorted Assets"

set @pnRS = BuildRowsetFromString(@productName," ")

set @pnRC = RowCount(@pnRS)
set @finalProductName = ""

FOR @i=1 TO @pnRC DO

  IF LENGTH(@finalProductName) < 20 THEN
    SET @row = ROW(@pnRS,@i)
    SET @word = FIELD(@row,1)
    IF EMPTY(@finalProductName) THEN
      SET @finalProductName = @word
    ELSE
      SET @finalProductName = CONCAT(@finalProductName,' ',@word)
    ENDIF
  ENDIF
  
NEXT @i
]%%

Length: %%=LENGTH(@finalProductName)=%%<br>
Final: %%=v(@finalProductName)=%%

Which outputs:

Length: 24
Final: Large Leisure and Lovely