Javascript Countdown

[mmueller-87]

Hallo liebe Forengemeinde,
ich habe eine fachspezifische Frage zu einer Countdown Funktion in Javascript/JQuery. Ich habe eine Liste mit verschiedenen Einträgen von Satellitenüberflügen. In dieser Liste stehen einige Einträge wie Start, Dauer und Ende des Überflugs. Nun lese ich die Werte aus einer Datenbank und gebe dieses in einem Template (Smarty) wieder. Nun versuche ich einen Countdown in den letzten 10 Einträgen abzurufen. Das klappt mit meiner Methode leider nicht. Folgendes habe ich bisher versucht:

Code:

...
     </thead>
      <tbody>
        {foreach key=Key item=Passes from=$Pass}
          <script type="text/javascript">
              // Timer 1
              window.onload = function() {
                const timer{$Key} = new CountdownTimer({
                  selector: "#clock{$Key}c",
                  targetDate: new Date('{($Passes.pass_start + $sLocalTime)|date_format:"%m %d, %Y %H:%i:%s"}'),
                }); timer{$Key}.startTimer();
              }
          </script>
          ... Weiter HTML Code
          <td align="center">
              <div class="clock" id="clock{$Key}c">
                <div class="no-countdown">
                  <font data-value="days"></font>
                </div>
                <font data-value="hours"></font>:<font data-value="minutes"></font>:<font data-value="seconds"></font>
              </div>
            </td>
          </tbody>
        </table>
... Weiter HTML Code

Kurze Erklärung der Smarty Variablen:
- $Key = Nummeriereung 1.......10
- $Passes.pass_start - Startzeit des Überflügs.

Einzeln ohne eine Dauerschleife funktioniert dieser Counter recht gut und zuverlässig. Jedoch nicht in einer Foreach Variante. Habe schon versucht diese mit $Key zu nummerieren. Leider ohne Erfolg, weil ich den weiteren Zusammenhang nicht zusammen bekomme. Daher meine Frage wie ich das am besten oder gar einfacher lösen kann. jemand eine Idee?

Grüße aus unserer Hauptstadt.