How to run three similar (number counter) scripts beneath each other (Only the first works)?

Question

I would like to have three number counters on my Wordpress website beneath each other.

I was able to make the code work fine with the first number counter, but when I add two more counters beneath ("counter1", "counter2", "conter3"), they do not show any numbers.

Help would be appreciated!

THIS WORKED FINE ALL BY ITSELF:

up to <a id="counter1"></a><!-- counts --> times lower cost

<script>
        let counts=setInterval(updated);
        let upto=0;
        function updated(){
            var count= document.getElementById("counter1");
            count.innerHTML=++upto;
            if(upto===1000)
            {
                clearInterval(counts);
            }
        }
    </script>

BUT THIS DOESNT WORK (just multiplied the above code):

up to <a id="counter1"></a><!-- counts --> times lower cost

<script>
        let counts=setInterval(updated);
        let upto=0;
        function updated(){
            var count= document.getElementById("counter1");
            count.innerHTML=++upto;
            if(upto===1000)
            {
                clearInterval(counts);
            }
        }
    </script>

up to <a id="counter2"></a><!-- counts --> times better quality

<script>
        let counts=setInterval(updated);
        let upto=0;
        function updated(){
            var count= document.getElementById("counter2");
            count.innerHTML=++upto;
            if(upto===1000)
            {
                clearInterval(counts);
            }
        }
    </script>

up to <a id="counter3"></a><!-- counts --> times less time

<script>
        let counts=setInterval(updated);
        let upto=0;
        function updated(){
            var count= document.getElementById("counter3");
            count.innerHTML=++upto;
            if(upto===1000)
            {
                clearInterval(counts);
            }
        }
    </script>

Answer 1

when you define a <script> tag in your file, every variable are shared between them! so by changing the name of varables you can achive what you want.

up to <a id="counter1"></a><!-- counts --> times lower cost
<br />
<script>
        let counts1=setInterval(updated);
        let upto1=0;
        function updated(){
            var count= document.getElementById("counter1");
            count.innerHTML=++upto1;
            if(upto1===1000)
            {
                clearInterval(counts1);
            }
        }
    </script>

up to <a id="counter2"></a><!-- counts --> times better quality
<br />
<script>
        let counts2=setInterval(updated);
        let upto2=0;
        function updated(){
            var count= document.getElementById("counter2");
            count.innerHTML=++upto2;
            if(upto2===1000)
            {
                clearInterval(counts2);
            }
        }
    </script>

up to <a id="counter3"></a><!-- counts --> times less time

<script>
        let counts3=setInterval(updated);
        let upto3=0;
        function updated(){
            var count= document.getElementById("counter3");
            count.innerHTML=++upto3;
            if(upto3===1000)
            {
                clearInterval(counts3);
            }
        }
    </script>

enter code here