ESP32 WEB

Hello,
I am working on a project, where I display (for now random) values in table and then control (for now) led on pin 2.
I am having troubles with putting this two parts together.

Is here anyone who would be able to help me, point me in the right direction?

Main.ino:

#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
 
#include "index.h"  //Web page header file
 
WebServer server(80);

int X1 = 0;
 
//Enter your SSID and PASSWORD
const char* ssid = "ESP";
const char* password = "123456789";
 
//===============================================================
// This routine is executed when you open its IP in browser
//===============================================================
void handleRoot() {
 String s = MAIN_page; //Read HTML contents
 server.send(200, "text/html", s); //Send web page
}
 
void handleADC() {
  Xvalue();
  Serial.print(X1);
  String adcValue = String(X1);
 server.send(200, "text/plane", adcValue); //Send ADC value only to client ajax request
}

void Xvalue(){
  X1 = random(300);
}
  
 
//===============================================================
// Setup
//===============================================================
 
void setup(void){
  Serial.begin(115200);

  pinMode(output2, OUTPUT);
  digitalWrite(output2, LOW);
  
  Serial.println();
  Serial.println("Booting Sketch...");
 
//ESP32 As access point
  WiFi.mode(WIFI_AP); //Access Point mode
  WiFi.softAP(ssid, password);
 
  Serial.println("Connecting to ");
  Serial.print(ssid);
 
    
  IPAddress IP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(IP);
//----------------------------------------------------------------
 
  server.on("/", handleRoot);      //This is display page
  server.on("/readADC", handleADC);//To get update of ADC Value only
 
  server.begin();                  //Start server
  Serial.println("HTTP server started");
}
 
//===============================================================
// This routine is executed when you open its IP in browser
//===============================================================
void loop(void){
  server.handleClient();
  delay(1);

}

Index.h:

const char MAIN_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <style>tab-table, th, td {border: 1px solid black;border-collapse:
collapse;text-align: center;}</style>
  </head>


// buttons
  <div class="button"align="center">
    <button type="start" class="btn btn-success" style="margin:2%;
height:45px; width:28%; margin-top:40px;">Start</button>
    <button type="button" class="btn btn-primary"style="margin:2%;
height:45px; width:28%; margin-top:40px;">Pause</button>
    <button type="button" class="btn btn-danger"style="margin:2%;
height:45px; width:28%; margin-top:40px;">Reset</button>
  </div>


// table
  <body>
    <table style="margin-top:20px; width:92.8%; margin-left:3.6%; ">
      <tr>
        <th style="height:45px; width:40%">Name</th>
        <th style="height:45px; width:20%">X location</th>
        <th style="height:45px; width:20%">Y location</th>
      </tr>
      <tr>
        <td bgcolor="#D3D3D3" style="height:45px; width:40%">Location 1</td>

////////////////
// Here I update number in tab, it is called adc because of some other code I used for this. Will change later
/////////////////
        <td bgcolor="#D3D3D3" style="height:45px; width:20%"><span id="ADCValue">0</span></td>
        <td bgcolor="#D3D3D3" style="height:45px; width:20%"><span
id="Y1">Y</span></td>
      </tr>
      <tr>
        <td style="height:40px; width:45%">Location 2</td>
        <td style="height:45px; width:20%">X</td>
        <td style="height:45px; width:20%">Y</td>
      </tr>
      <tr>
        <td bgcolor="#D3D3D3" style="height:45px; width:40%">Location 3</td>
        <td bgcolor="#D3D3D3" style="height:45px; width:20%">X</td>
        <td bgcolor="#D3D3D3" style="height:45px; width:20%">Y</td>
      </tr>
    </table>
  </body>

</html>

<body>
 
<script>
 
setInterval(function() {
  // Call a function repetatively with 2 Second interval
  getData();
}, 2000); //2000mSeconds update rate
 
function getData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("ADCValue").innerHTML =
      this.responseText;   // again, it is called adc because of some other code I used.
    }
  };
  xhttp.open("GET", "readADC", true);
  xhttp.send();
}
</script>
</body>
</html>
)=====";

I am attaching how the http site looks like.

I would like to add something like “handle.button” function next to handle client.

Thank you for any ideas.