document.getElementById with php and javascript

Question

im coding cards with timers, i have my database and this save the hour and date. My problem here is at the moment to print the timers

this code with "demo" on each the fields with $row[0] will display a timer on the screen, but i need one time foreach of the cards, i dont have any idea of how i can do this, my consult i very simple $row[0]= ID, $row[1]= serial number, $row[2]= street, $row[3]=year, $row[4]=month, $row[5]=day, $row[6]=Hour, $row[7]=minutes, $row[8]=seconds

<?php
$date = $row[3] . "-" . $row[4] . "-" . $row[5];
              $time = $row[6] . ":" . $row[7] . "-" . $row[8];
              echo $date . " " . $time;
              $date_today = $date . ' ' . $time;
              ?>
              <script type="text/javascript">
                  var count_id = "<?php echo $date_today; ?>";
                  var countDownDate = new Date(count_id).getTime();

                  var x = setInterval(function(){
                  var now = new Date().getTime();
                  var distance = countDownDate - now;

                  var hours = Math.floor((distance%(1000*60*60*24))/(1000*60*60));
                  var minutes = Math.floor((distance%(1000*60*60))/(1000*60));
                  var seconds = Math.floor((distance%(1000*60))/1000);
                  
                  document.getElementById(<?php $row[0] ?>).innerHTML = hours + "h " + minutes + "m " + seconds + "s ";

                  if(distance<0){
                      clearInterval(x);
                      document.getElementById(<?php $row[0] ?>).innerHTML="COMPLETO"
                  }
                  },1000);
                  </script>
                  <?php
                  echo '<p id="$row[0]" style="font-size:18px;"></p>'
                  ?>

im prety sure my issue is on the document.getELementById

o i forget to tell that im doing all this on PHP/apache2

Answer 1

i took the code and modified like @Gardener sugest

$date = $row[3] . "-" . $row[4] . "-" . $row[5];
              $time = $row[6] . ":" . $row[7] . "-" . $row[8];
              echo $date . " " . $time;
              $date_today = $date . ' ' . $time;
              ?>
              <script type="text/javascript">
                  var count_id = "<?php echo $date_today; ?>";
                  var countDownDate = new Date(count_id).getTime();

                  var x = setInterval(function(){
                  var now = new Date().getTime();
                  var distance = countDownDate - now;

                  var hours = Math.floor((distance%(1000*60*60*24))/(1000*60*60));
                  var minutes = Math.floor((distance%(1000*60*60))/(1000*60));
                  var seconds = Math.floor((distance%(1000*60))/1000);
                  
                  document.getElementById('<?= $row[0]; ?>').innerHTML = hours + "h " + minutes + "m " + seconds + "s ";

                  if(distance<0){
                      clearInterval(x);
                      document.getElementById('<?= $row[0]; ?>').innerHTML="COMPLETO"
                  }
                  },1000);
                  </script>
                  <?php
                  echo '<p id="' . $row[0] . '" style="font-size:18px;"></p>'
                  ?>
            </div>
            <div class="card-body">
              <p class="card-text"><?php echo $row[1]; ?></p>
              <p class="card-text"><?php echo $row[2]; ?></p>  
            </div>