Fonction javascript qui beug

bonjour j'ai repris une fonction en javascript permettant d'avoir un compte a rebours cette fonction fonctionne très bien lorsque qu'il y en a qu'une sur la page cependant lorsque j'en met plusieurs différentes en changeant juste le nom de la fonction (ce qui permet qu'elle soit différente) cela ne fonctionne plus ou du moins ça beug car elle s'affiche mais de s'anime plus or lorsque je reset la page le décompte a changé ce qui me prouve que les fonctions marchent mais qu'elles doivent être trop lourde pour s'afficher en même temp je voudrais donc savoir si on peut résoudre ce problème

<div id="compte_a_rebours"><noscript>fin de l'évènement le 9 août 2019.</noscript></div>
<script type="text/javascript">

function compte_a_rebours()
{
var compte_a_rebours = document.getElementById("compte_a_rebours");
var date_actuelle = new Date();
var date_evenement = new Date("Aug 9 10:00:00 2019");
var total_secondes = (date_evenement - date_actuelle) / 1000;
var prefixe = "L'évènement commence dans ";
if (total_secondes < 0)
{
prefixe = "l'évènement a commencé il y a "; // On modifie le préfixe si la différence est négatif
total_secondes = Math.abs(total_secondes); // On ne garde que la valeur absolue
}
if (total_secondes > 0)
{
var jours = Math.floor(total_secondes / (60 * 60 * 24));
var heures = Math.floor((total_secondes - (jours * 60 * 60 * 24)) / (60 * 60));
minutes = Math.floor((total_secondes - ((jours * 60 * 60 * 24 + heures * 60 * 60))) / 60);
secondes = Math.floor(total_secondes - ((jours * 60 * 60 * 24 + heures * 60 * 60 + minutes * 60)));
var et = "et";
var mot_jour = "jours,";
var mot_heure = "heures,";
var mot_minute = "minutes,";
var mot_seconde = "secondes";
if (jours == 0)
{
jours = '';
mot_jour = '';
}
else if (jours == 1)
{
mot_jour = "jour,";
}
if (heures == 0)
{
heures = '';
mot_heure = '';
}
else if (heures == 1)
{
mot_heure = "heure,";
}
if (minutes == 0)
{
minutes = '';
mot_minute = '';
}
else if (minutes == 1)
{
mot_minute = "minute,";
}
if (secondes == 0)
{
secondes = '';
mot_seconde = '';
et = '';
}
else if (secondes == 1)
{
mot_seconde = "seconde";
}
if (minutes == 0 && heures == 0 && jours == 0)
{
et = "";
}
compte_a_rebours.innerHTML = prefixe + jours + ' ' + mot_jour + ' ' + heures + ' ' + mot_heure + ' ' + minutes + ' ' + mot_minute + ' ' + et + ' ' + secondes + ' ' + mot_seconde;
}
else
{
compte_a_rebours.innerHTML = 'Evènement commence dans';
}
var actualisation = setTimeout("compte_a_rebours();", 1000);
}
compte_a_rebours();
</script>




voila la fonction

Bonjour squazior
Je t'ai fait un exemple :
https://codepen.io/Zonecss/pen/PgYrRX

je vais essayer merci

ce que tu m'a envoyé fonctionne cependant je viens de me rendre compte que le problème ne vient pas de là mais du fait que la page HTML contenant le compte a rebours et contenu dans un iframe qui est géré par une fonction permettant d'avoir un iframe interchangeable, donc est ce qu'on peut resoudre ce problème ou pas ?