How to pass data across header to main

Hi all, i have this project running with a WEMOS D1 R1 Webserver with a fingerprint scanner. I wanted to pass some INT data from a seperated enroll header file to main file to run it in the loop().

What i did was i create a global.h with a variable (int enrollId) then i want to save it from enroll.h and pass the variable to main. But the variable is empty when i run it.

Below are 3 code section, Page_Enroll.h, main and global.h

This is my Page_Enroll.h code here i pass my input to id variable and assign to enrollId variable

const char PAGE_Enrollfingerprint[] PROGMEM = R"=====(
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<a href="admin.html"  class="btn btn--s"><</a>&nbsp;&nbsp;<strong>Enroll fingerprint</strong>

<body><h1>Enroll fingerprint</h1>

<p>Status - </p><p id="outputState"></p>


<p>result - </p><p id="result"></p>


<p>Please enter an ID to enroll fingerprint:</p>


ID: <input type="text" id="myid" name="id">


<input type="submit" value="Submit" onclick="Trigger()">

<p><a href="javascript:Trigger()"><button class="fingerbutton">Start Enroll</button></a></p>
<script>

function Trigger()
{
  setValues("/admin/enroll");

  int id = parseInt(document.getElementById("myid").value);
  
  if(document.getElementById('myid').value == "")
  {
	  document.getElementById('result').innerHTML = id;
          document.getElementById('outputState').innerHTML = "Cannot be empty";
  }
  else if(document.getElementById('myid').value != "") 
  {
	  enrollId = id;
	  document.getElementById('result').innerHTML = enrollId;
          document.getElementById('outputState').innerHTML = "ready to enroll!";
          server.send(200,"text/html,",document.getElementById('result'));
  }
  
}

window.onload = function ()
{
  load("style.css","css", function() 
  {
    load("microajax.js","js", function() 
    {
          // Do something after load...
    });
  });
}
function load(e,t,n){if("js"==t){var a=document.createElement("script");a.src=e,a.type="text/javascript",a.async=!1,a.onload=function(){n()},document.getElementsByTagName("head")[0].appendChild(a)}else if("css"==t){var a=document.createElement("link");a.href=e,a.rel="stylesheet",a.type="text/css",a.async=!1,a.onload=function(){n()},document.getElementsByTagName("head")[0].appendChild(a)}}

</script>

)=====";

This is part of the global.h code

#ifndef GLOBAL_H
#define GLOBAL_H

int enrollId;
boolean enableEnrollFinger = false;

#endif

This one part of my Main code (run_enroll() is the place that i find my enrollid variable is not working)

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <Ticker.h>
#include <EEPROM.h>
#include <WiFiUdp.h>
#include "global.h"
#include "Page_Enroll.h"

void setup()
{
  server.on ("/enroll.html", []() { server.send ( 200, "text/html", PAGE_Enrollfingerprint );  } );
  server.on ("/admin/enroll", run_enroll);
  server.onNotFound ( []() { Serial.println("Page Not Found"); server.send ( 400, "text/html", "Page not Found" );   } );
  server.begin();
}

void loop()
{
    if(enableEnrollFinger)
   {
     run_enroll();
     delay(2000);
   }
   server.handleClient();
}

void run_enroll()
{ 
  enableEnrollFinger = true;
  Serial.println("Ready to enroll a fingerprint!");
  Serial.println(enrollId);
  Serial.println(startenrolling);
  id = enrollId;
  if (id == 0) {// ID #0 not allowed, try again! 
    Serial.println("fail to enroll!");
     return ;
  }

  Serial.print("Enrolling ID #");
  Serial.println(id);
  
  while (!  getFingerprintEnroll() );
}

From what I can tell PAGE_Enroll.h contains only one variable ... PAGE_Enrollfingerprint

PAGE_Enrollfingerprint is declared as const char array

const char PAGE_Enrollfingerprint[]