User:Hefner/Sandbox8

<style> .bingo-table td {

 cursor: pointer;
 padding: 12px 18px;
 border: 1px solid #aaa;
 text-align: center;
 user-select: none;

}

.bingo-selected {

 background-color: #ffe599 !important;
 border: 2px solid #d4af37 !important;
 color: black;
 font-weight: bold;

} </style>

	B1		B2		B3
	I1		I2		I3
	N1		N2		N3

<script> document.addEventListener("DOMContentLoaded", function () {

 const cells = document.querySelectorAll(".bingo-table td");

 cells.forEach(function (cell) {
   const id = cell.id;
   if (!id) return;

   // Restore selection from localStorage
   if (localStorage.getItem(id) === "selected") {
     cell.classList.add("bingo-selected");
   }

   // Toggle selection on click
   cell.addEventListener("click", function () {
     cell.classList.toggle("bingo-selected");

     if (cell.classList.contains("bingo-selected")) {
       localStorage.setItem(id, "selected");
     } else {
       localStorage.removeItem(id);
     }
   });
 });

}); </script>