esp32, button onclick Can't find variable: of function

I cant get any of the buttons using onclick to recognise the functions. I get an error "cant find variable". Im very new to all this and at a loss. It doesn't matter which button I click I have the same issues with all of them.

in the below code, I click on <button onclick="show_admin()">Admin</button> which should call function show_admin().. What am I doing wrong please.

Inspector output

const char main_page[] PROGMEM = R"=====(
  <!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset='UTF-8'">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="refresh" content="500; url=/">

 
 
   <title>System Settings</title>
  <body onload="show_admin()">
  <div class="banner">
    <h1>X Controller</h1>
  </div>
  <div class="split left">
    <div class="centered">

These are my button

      <button onclick="show_admin()">Admin</button>
      <br/>
      <button onclick="show_wifi()">WIFI</button>
      <br/>
      <button onclick="show_tags()">Tags</button>
      <br/>
    </div>
  </div>
  <div class="split right">
    <div class="centered" id="showdata">
    </div>
  </div>
  
  
 </body>
  
<script>

These are my functions

function show_admin() {var table_data = <h1>Admin Settings</h1><br/>%s<br/>
  <form action="/ADMINSetting" method="POST">
<table><tr>
  <td> User Name </td> <td> <input type="String" name="UserName" placeholder="%s"></td>
</tr><tr>
  <td> Password </td> <td> <input type="String" name="UserPass" placeholder="%s">
</td></tr></table>
  <input type="submit" value="Update Admin Details">
</form>
  document.getElementById("showdata").innerHTML = table_data
}

function show_wifi() { var table_data = <h1>WIFI Settings</h1><br/>%s<br/>
<form action="/WIFISetting" method="POST">
<table>
<tr>
<td> SSID Network </td> <td> <input type="String" name="WifiSsid" placeholder="%s"></td>
</tr><tr>
<td> SSID Password </td> <td> <input type="String" name="SsidPass" placeholder="%s"></td>
</tr>
</table>
<input type="submit" value="Update Wifi Details">
</form>
document.getElementById("showdata").innerHTML = table_data
}

function show_tags() { let table_data = <h1>Tag Settings</h1><br/>%s<br/>
<form action="/DEVICESetting" method="POST">
<table>
<tr>
<td> Access Tag 1 </td> <td> <input type="String" name="TAG1" placeholder="%s"></td>
</tr>
<tr>
<td> Access Tag 2 </td> <td> <input type="String" name="TAG2" placeholder="%s"></td>
</tr>
<tr>
<td> Cleaner Tag 1 </td> <td> <input type="String" name="CTAG1" placeholder="%s"></td>
</tr>
</table>
<input type="submit" value="Update BLE Tag Details">
</form>
document.getElementById("showdata").innerHTML = table_data
}
</script>
  
</body>
</html>

)=====";

I have tried rearranging the function and moving its position. with no luck

Solution

Unless you have JSX installed, You can't just stick HTML elements into JavaScript like that. You will need to use quotes around all the HTML. It looks like you're reusing the same tags anyway, why not stick all those tags into the HTML portion and update the values in Javascript? You can also update the CSS through JavaScript and set display:none if you want to hide an unused element.