Put clock forward by one hour

Question

I would like to have two 24-hour clocks on a webpage.

WST should always be one hour ahead of GMT. WST is showTime() and GMT is showTime2().

The two clocks are currently telling the same time.

Could someone explain what I've got to change to put WST 1hr ahead of GMT?

And also - will my GMT actually be the local time of the machine, rather than GMT (UK time) - I'd like it to tell the UK time no matter where your machine is located.

function showTime() {
  var date = new Date();
  var h = date.getHours(); // 0 - 23
  var m = date.getMinutes(); // 0 - 59
  var session = " WST";

  if (h == 0) {
    h = 12;
  }


  h = (h < 10) ? "0" + h : h;
  m = (m < 10) ? "0" + m : m;

  var time = h + ":" + m + "" + session;
  document.getElementById("MyClockDisplay_").innerText = time;
  document.getElementById("MyClockDisplay_").textContent = time;
  console.log(time);
}

function showTime2() {
  var date = new Date();
  var h = date.getHours(); // 0 - 23
  var m = date.getMinutes(); // 0 - 59
  var session = " GMT";

  if (h == 0) {
    h = 12;
  }


  h = (h < 10) ? "0" + h : h;
  m = (m < 10) ? "0" + m : m;

  var time = h + ":" + m + "" + session;
  document.getElementById("MyClockDisplay").innerText = time;
  document.getElementById("MyClockDisplay").textContent = time;
  console.log(time);

}

showTime();
showTime2();

body {
  background: white;
}

.clock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: black;
  font-size: 20px;
  font-family: sans-serif;
  letter-spacing: 3px;
}

<div id="MyClockDisplay_" style=p osition:relative; left:80px; top:2px; class="clock" onload="showTime()"></div>

<div id="MyClockDisplay" style=p osition:relative; right:80px; top:2px; class="clock" onload="showTime2()"></div>