<script>
  ...

  let timeZones = [
    { id: 1, timeZone: "America/Argentina/Buenos_Aires" },
    { id: 2, timeZone: "Europe/Oslo" },
    { id: 3, timeZone: "Australia/Sydney" },
  ];
  let totalTimeZones = timeZones.length;

  //const timeZone = "America/Argentina/Buenos_Aires";
  const pattern = "HH:mm:ss";
  // Get the last name of the full TZ name
  // and replace the underscore with a space
  $: formattedTimeZone = timeZone
    .split("/")
    .slice(-1)
    .pop()
    .replace(/_/g, " ");

  $: zonedDate = utcToZonedTime(date, timeZone);
  $: output = format(zonedDate, pattern, { timeZone: timeZone });

  $: timeDiff = differenceInHours(date, zonedDate);

  $: if (timeDiff > 0) {
    displayedTimeDiff = `${timeDiff} Hour(s) Behind`;
  } else if (timeDiff < 0) {
    // Math.abs() inverts the number to be positive
    // https://stackoverflow.com/a/4652112
    displayedTimeDiff = `${Math.abs(timeDiff)} Hour(s) Ahead`;
  } else {
    displayedTimeDiff = "No Time Difference";
  }
</script>

<ul role="list" class="datetime-list stack-large">
  <!-- datetime-1 -->
  <li class="datetime">
    <div class="cards">
      <div class="card">
        {#each timeZones as timeZone, index (timeZones.id)}
          <span class="time-elsewhere label-wrapper">
            <label for="datetime-1" class="datetime-label">
              <span>
                <span
                  class="location">{timeZone.timeZone}</span>
                <br />
                <span class="hours-behind">{displayedTimeDiff}</span>
              </span>
              <span class="world-time">{output}</span>
            </label>
          </span>
          ...
        {/each}
      </div>
    </div>
  </li>
</ul>