I am creating an interactive document in pdf. The page in the document has two buttons: add and remove. When the add button is pressed it adds another page from the same template using the code above. When the remove button is pressed it removes the current page.

add button code:
template.spawn({nPage: this.pageNum + 1, bRename: true, bOverlay: false});

remove button code:
this.deletePages({nStart: this.pageNum});

My problem is that if I add a page it will be called ‘P1.myTemplate.myField’ then if I click the add button to add another page, the new page will be called ‘P2.myTemplate.myField’. Now if I click remove and delete the first page ‘P1.myTemplate.myField’ and then go to page ‘P2.myTemplate.myField’ and click add the new page will also be named ‘P2.myTemplate.myField’. Which causes the input in the text fields to duplicate across both pages.

Visual representation:
Note: Page Name refers to the name adobe gives the elements in the page and page number refers to the actual page number in the document.

First Page
Page/Object Name: P1.myTemplate.myField
Page number: 1

Add second Page:
Page/Object Name: P1.myTemplate.myField P2.myTemplate.myField
Page number: 1 2

Delete First Page:
Page/Object Name: P2.myTemplate.myField
Page number: 1

Add second Page:
Page/Object Name: P2.myTemplate.myField P2.myTemplate.myField
Page number: 1 2

Is there a way I could control how adobe names the pages? or any work around for this issue? What is recommended to do for dynamic PDF forms?