How to change multiple elements innerHTML using setinterval?

Question

I'm working on certain app and I need to create kind of count down for each element. Unfortunately when I', passing the element to my function it does not work. Neverthless if I change the function a bit and just replace the element's innerHTML out of the setInterval it starts working. I'm totally out of any idea now. Appreciate for help :) const timeout is the element.

const json_content = json_reader(reserved)
for(x=0;x<json_content["key"].length;x++){
    var tds = document.querySelectorAll(".display_content table td")
    for(let td of tds){
        new Vue({
        delimiters: ['[[', ']]'],
        el:td,
        data: { 
            display: "test",
            seats_number: "0",
        },
        methods:{
            test(){
                console.log("elo")
            }
        },
        created: ()=>{
                const td_date = td.innerText
                if(td_date.includes(json_content["key"][x])){
                    const td_hour = td.nextElementSibling
                    const json_hour = json_content["value"][x]["times"]
                    if(Object.keys(json_hour).includes(td_hour.innerText)){
                        const seats = json_content["value"][x]["times"][td_hour.innerText]
                        const td_seat = td_hour.nextElementSibling
                        const timeout = td_seat.nextElementSibling
                        const seats_array = []
                        seats.forEach(element => {
                            const seat_json = json_reader(element)
                            seats_array.push(seat_json["key"]+":"+seat_json["value"])
                        });
                        this.seats_number = seats.length
                        td_seat.innerHTML = "<span onclick='display_seats(this.nextSibling)'>"+[[this.seats_number]]+"</span>"+"<span class='seats' value='"+seats_array+"'></span>"
                        counter(timeout)
                    } 
                }   
            }
        })
    }
}

and counter function:

function counter(element){
    var t = 10
    setInterval(()=>{
        element.innerHTML = String(t)
        t -= 1
    },1000)

Answer 1

1. Not sure, where are you calling the counter function

 <input type="number" id="inp"> <div id="counter"></div> <script> let input = document.getElementById('inp') let counter = document.getElementById('counter') let handleInput = e => { let num = Number(e.target.value) let _counter = num - 1 let timer = setInterval(_ => { if(!_counter) clearInterval(timer) counter.innerText = _counter _counter-- }, 1000) } input.addEventListener('input', handleInput) </script>

But something like above should work. You can input numbers from 1-9 to test.

2. Another thing is, check if the element you are passing is actually the element you aare looking for. You might want to console.log(element) and check.

3. Directly updating dome is not a very good idea. You can access the dom via ref or just use a variable initialized in data() and just update the variable every second, rest will be taken care of by vue

 new Vue({ el: "#app", data: { timer: 20 }, mounted() { setInterval(()=> this.timer--, 1000) } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> {{timer}} </div>