JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>

<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>  HTML5 </title>
  <meta name="description" content=" HTML5 ">
  <meta name="author" content="MyPc">

</head>
<body>
<form action="#"  id="form" method="post">
  <div style="margin-left: 2rem;">
    <!-- <input class="btn btn-primary" type="submit" value="Submit" id="btn" onclick="hide()"> -->
    <input class="btn btn-primary" type="button" value="Submit" id="btn" onclick="hide()">
  </div>
</form>
<div style="margin-top: 4rem; display: flex; justify-content: center; align-content: center;">
  <table id="table">
    <tbody>
      <tr>
        <th scope="row">Profile No. : </th>
        <td>{{ProfileNo}}</td>
      </tr>
      <tr>
        <th scope="row">Name : </th>
        <td>{{Name}}</td>
      </tr>
    </tbody>
  </table>
</div>
<script>
window.onload = function () {
  let mydisplay = localStorage.getItem("myTable");
  console.log(mydisplay);
  if (mydisplay == "table-cell") {
    document.querySelector("#table").style.display = mydisplay;
    localStorage.setItem("myTable", "none");
  } else {
    document.querySelector("#table").style.display = "none";
  }
};
function hide() {
  document.getElementById("form").submit();
  console.log("submit");
  localStorage.setItem("myTable", "table-cell");
}
</script>
</body>
</html>