I am somewhat new to html/php/web-design, and i created an html page that can create a message via hovering over buttons.

<button class="letter" onmouseover="Over(65)">A</button><br>

and the javascript function, Over()

function Over(X){
    console.log("Over " + String.fromCharCode(X));
    let x = '<div class="out"><p id="text">';
    x += document.getElementById("text").innerHTML;
    x += String.fromCharCode(X);
    x += "</p></div>";
    $("div.out").replaceWith(x);
}

put simply, hover over button -> call Over() -> add letter to text

however, while exploring PHP, i got the idea to combine it with another project i had done earlier, using a function that can send chrome OS notifications. (functions at bottom)

My goal for this is to have a column of buttons on the right for letters, 2 buttons on the left for Back and Send. The Back Already works just using .slice(0, document.getElementById("text").innerHTML.length-1) Now i need to figure out how to make the send function output a notification to all other Windows/tabs i dont know if thats the right word

reference image

Page layout

If this is not enough info or if anyone needs a clearer explanation, i will take feedback <3

function notifyMe(
 body = "Notification Body",
 title = 'Notification title'
) {
 if (Notification.permission !== 'granted')
  Notification.requestPermission();
 else {
  var notification = new Notification('Notification title',{
   icon: 'icon.png',
   body: "Notification Body",
  });
  notification.onclick = function() {
   window.open('https://stackoverflow.com/');
  };
 }
}