How to place a countdown in more than one post on the page?

Question

Good morning! I have the following problem, I have the view below that works as a schedule, within it I have some publications. I can get to each of the posts and get the amount in minutes left to expire/begin. The problem is that I can’t put more than one countdown counter at the same time (on the page) as I walk the for loop. I tested removing the loop, doing in just one post and it works normally.. someone can give me a North?

function DecrementaTempo(){
    
    publicacoes = $(".row");
    
    //for (var row = 0; row < publicacoes.length; row++) {
       
        var rowChild = publicacoes[0];

        var publicacao = rowChild.getElementsByClassName('card-content white col l6')[0];

        var span = publicacao.getElementsByTagName('p')[5];
        var tempoRestante = parseInt(span.getElementsByTagName('span')[0].textContent);
        
        if (tempoRestante > 0)
        {
            console.log("tempo: " + tempoRestante);

            var cronometroTempo = setInterval(function(){
                
                tempoRestante --;
                console.log("decrementando: " + tempoRestante);
                span.getElementsByTagName('span')[0].textContent = tempoRestante;
        
                if (parseInt(span.getElementsByTagName('span')[0].textContent) == 0)
                {
                    console.log("Entrou na parada!");
                    
                    var nav = $("#nav-wrapper");
                    nav.addClass('mudacor');
                    window.location.reload();
                    clearInterval(cronometroTempo);
                    
                }

                tempoRestante = parseInt(span.getElementsByTagName('span')[0].textContent);

            }, 1);
        //}
    }    

<div class="container">
  <div class="row">
          <div class="card col l6">
              <div class="card-image col l4 pull-l1">
                  <img src="../../images/image1.jpg">
              </div>
              <div class="card-content white col l6">
                  <p>1</p>
                  <p>Postagem 1</p>
                  <p>Desc Pub 1</p>
                  <p id="horaInicial">2018-07-23 16:40:16</p>
                  <p id="horaFinal">2018-07-29 16:40:19</p>
                  <p id="boxText"> Tempo: 
                  <span id="tempoRestante">467</span></p>
                  <p>30.00</p>
                  <p></p>
                  <p>http://imagem1.com</p>
                  <p>0</p>
              </div>
          </div>
  </div>

  <div class="row">
          <div class="card col l6">
              <div class="card-image col l4 pull-l1">
                  <img src="../../images/image1.jpg">
              </div>
              <div class="card-content white col l6">
                  <p>1</p>
                  <p>Postagem 1</p>
                  <p>Desc Pub 1</p>
                  <p id="horaInicial">2018-07-23 16:40:16</p>
                  <p id="horaFinal">2018-07-29 16:40:19</p>
                  <p id="boxText"> Tempo: 
                  <span id="tempoRestante">467</span></p>
                  <p>30.00</p>
                  <p></p>
                  <p>http://imagem1.com</p>
                  <p>0</p>
              </div>
          </div>
  </div>
</div>

Answer 1

Let’s say you have an HTML like this:

<div class="container">
  <div class="row">
      <div class="card col l6">
          <div class="card-image col l4 pull-l1">
              <img src="../../images/image1.jpg">
          </div>
          <div class="card-content white col l6">
              <span class="tempoRestante">1</span> <!-- Note que mudei aqui -->
 ...

OBS>> Note that the attributes "id" never can repeat

/*Pega todos os elementos que tem a classe tempoRestante,
     que estão dentro de .card 
     que estão dentro de .row no caso:
    <div class="row">
       ...
        <div class="card">
            ...
            <span class="tempoRestante">           <-- Isso
*/

function getPublicacoes(){
    return tempoPublicacoes = $( '.row .card .tempoRestante' );
}

function timerInit(){                             
     let timer = $( this ),                    //pega o timer
         tempo = parseInt( timer.text() ),     //pega o tempo dele
         intervalId = setInterval( () => {     //Cria uma função que roda a cada 1000 milesimos (1 segundo)
             tempo--;                          //reduz o tempo

             timer.text( tempo );              //seta o tempo

             if( tempo == 0 ){                 //checa se acabou
                 clearInterval( intervalId );  //Se acabou limpa e
                 timer.data( 'status', 'stopped' ); //Coloca status de parado
             }
         }, 1000 );

     timer.data( 'status', 'running');         //Coloca status de iniciado
}

function iniciarTimers(){
    //Onde os timers não tem data-running
    let naoIniciadas = getPublicacoes().filter( tempo => !$( tempo ).data( 'running' ) );

    //para cada timer não iniciado
    $( naoIniciadas ).each(timerInit);        
}