Navigate bwtween 3 pages with "next" button

I am trying to navigate between 3 pages with a "next" button, i also need to highlight the circle that indicates the page i am currencly in , 

ex:

I declared a local variable for the "NextPage" and gave it a value, but it seems to be null , 

The error i am getting is " Error in a!forEach() expression during iteration 1: Expression evaluation error at function a!stampField [line 47]: Cannot compare incompatible operands of type Number (Integer) and type Null."

why is it not saving the value of the local "NextPage"?

    local!acc,
    local!requestDetails,
    /* Defines whether or not to collapse the side nav */
    local!stampNav: false,
    /* The selected navigation section */
    local!activeStampNavSection: 1,
    local!NextPage: 1,
    local!MaxPages:3,
   
    /* The navigation sections */
    local!stampNavSections: {
      a!map(name: "Customers Details", icon: "user-circle"),
      a!map(name: "Request Details",     icon: "tasks"),
      a!map(name: "Attachments",  icon: "file-upload")
  
    },
    {
      a!richTextDisplayField(
        label: "Initiate ",
        labelPosition: "COLLAPSED",
        value: {
          a!richTextItem(
            text: {
              "Initiate Document Request"
            },
            color: "#000000",
            style: {
              "STRONG"
            }
          )
        }
      ),
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!sideBySideLayout(
                items: {
                  a!forEach(
                    items: local!stampNavSections,
                    expression: a!sideBySideItem(
                      item: a!stampField(
                        icon: fv!item.icon,
                        backgroundColor: if(
                         fv!index=local!NextPage, 
                          
                 /*   fv!index = local!activeStampNavSection, */
                          
                          "ACCENT",
                          "TRANSPARENT"
                        ),
                        contentColor: if(
                          fv!index=local!NextPage, 
                          "STANDARD",
                          "ACCENT"
                        ),
                  /*      link: a!dynamicLink(
                          value: fv!index,
                          saveInto: local!activeStampNavSection
                        ),*/
                        
                        size: "SMALL",
                        tooltip: fv!item.name,
                        accessibilityText: if(
                          fv!index = local!activeStampNavSection,
                          fv!item.name & " " & "selected",
                          ""
                        )
                      )
                    )
                  )
                },
                spacing: "DENSE",
                stackWhen: {
                  "DESKTOP_WIDE",
                  "DESKTOP",
                  "DESKTOP_NARROW",
                  "TABLET_LANDSCAPE",
                  "TABLET_PORTRAIT"
                }
              )
            },
            width: "EXTRA_NARROW"
          ),
          a!columnLayout(
            contents: {
              /* Conditionally display selected navigation section.       *
               * Sections are created individually here because they will *
               * have varying contents, so if you change the list in      *
               * local!stampNavSections, you will need to make sure       *
               * the list of sections here is the correct length.         */
              choose(
                local!NextPage,
              /*  local!activeStampNavSection,*/
                a!sectionLayout(
                  label: "",
                  contents: { 
                    rule!CustomerDetails(local!acc)
                    
                  }
                ),
                a!sectionLayout(
                  label: "shhhhh",
                  contents: {
                    rule!RequestDetailsAndRequestDoc( local!requestDetails)
                    
                  }
                ),
                a!sectionLayout(
                  label: index(
                    local!stampNavSections.name,
                    local!activeStampNavSection,
                    ""
                  ),
                  contents: {}
                )
              )
            }
          )
        }
        
      ),
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {a!buttonLayout(
              primaryButtons: {
                a!buttonWidget(
                  label:"next",
                  value:if(local!NextPage<local!MaxPages,local!NextPage+1,local!NextPage),
                  saveInto: {
                    
                    
                    local!NextPage,
                    
                   
                    if(local!NextPage=2,a!save(ri!NextPage,local!MaxPages),null),
                    a!save(local!NextPage,save!value)
                  
                    
                  },
                  icon: "angle-right",
                  iconPosition: "END",
              
                  submit: true,
                  style: "NORMAL",
                  validate: true



                )
              },
              secondaryButtons: {
                a!buttonWidget(
                  label: "Cancel",
                  value: true,

                  submit: true,
                  style: "NORMAL",
                  validate: false
                ),
                a!buttonWidget(
                  label: "Back",
                  icon: "angle-left",
                  value: true,
               
                  submit: true,
                  style: "NORMAL",
                  validate: false
                )
              }
            )}
          )
        }
      )
    }