Multi line textfield with row lines

I have a Text Field (Allowed Multiple Lines) within a flowed (top to bottom) subform.

Subform1

- Texfield1

Now i want a dotted line under every line.

i changed the Subform1 to Positioned and added a new subform within Subform1.

The new subform has the same x/y position as Textfield1

In the new subform i added a line and positioned it under the textfield.

Subform1

- Textfield1

- Subform2

  - Line1

And added a script to Subform2 that checks the height of Textfield1 and calculates how many times Subform2 must be repeated.

// Count the rows of the Subform
var vRows = this.LijnSub.instanceManager.count;

//Calculate the height en needed subforms
var vHeight = Math.round(xfa.layout.h(form1.Formulier.Toelichting.ToelichtingSub.Toelichting,"pt"));
var vLines = Math.round(vHeight / 16);

//Add or remove subrows
this.LijnSub.instanceManager.setInstances(vLines);

And it almost works as i want.

But when some lines are deleted within Textfield1, the height of Subform1 and/or Subform2 doesn't change back.

And when Textfield1 is to high to fit on the page (on my form the textfield started on the half of the page), the complete textfield moves to the next page.

Including the lines.

But i checked "Allow Page Breaks within Content" on all the subforms, aswell on Textfield1

Is there another way to underline all the lines in a Textfield?

Lines must be the full length of the subform/textfield