Add a progress bar for each card

Question

im new on PHP and Javascript, im coding some timers displayed on cards with PHP. For each card on the screen i need add a timer and a progress bar. So, i already have the timers and the progressbar

i was looking a way to make the progressbar

and i code something like this

<progress class="timer1" value="0" max="100">
</progress> 
<script>
            var ar;
             $(document).ready(function(){
               var _sI=[];
               $.ii=function(){
                 ar=arguments;
                 if(ar.length==3){
                   if(_sI[ar[0]]==undefined){
                     _sI[ar[0]]={};
                     }else{
                       clearInterval(_sI[ar[0]].reg);
                       } _sI[ar[0]].fn=ar[2];
                       _sI[ar[0]].t=ar[1];
                       _sI[ar[0]].reg=setInterval(ar[2],ar[1]);
                       }else if(ar.length==1){
                         clearInterval(_sI[ar[0]].reg);
                         }}});
            $(document).ready(function () {
                  var value = localStorage.getItem("timer1_value") || 0;
                  $('.timer1').val(value);
                  $.ii('t1', 36000, function () {
                      var t1v = $('.timer1').val();
                      if (t1v < 100) {
                          $('.timer1').val(t1v + 1);
                          localStorage.setItem("timer1_value", t1v + 1)
                      } else {
                          localStorage.removeItem("timer1_value");
                          $.ii('t1');
                      }
                  });
              });
            </script>

and yea, this works for me, except for the progress bar for each element

i bring all my rows on a query and the fetched data (MariaDB Mysql) is something like

$row[0] //ID
$row[1] //serial number
//bla bla bla

i understand that i only need the ID for each element, but i dont know how i can put this on my code... i was thinking something like this

<progress class='<?= timer . $row[0] ?>'  value="0" max="100">
            </progress> 
            <script>
            var ar;
             $(document).ready(function(){
               var _sI=[];
               $.ii=function(){
                 ar=arguments;
                 if(ar.length==3){
                   if(_sI[ar[0]]==undefined){
                     _sI[ar[0]]={};
                     }else{
                       clearInterval(_sI[ar[0]].reg);
                       } _sI[ar[0]].fn=ar[2];
                       _sI[ar[0]].t=ar[1];
                       _sI[ar[0]].reg=setInterval(ar[2],ar[1]);
                       }else if(ar.length==1){
                         clearInterval(_sI[ar[0]].reg);
                         }}});
            $(document).ready(function () {
                  var value = localStorage.getItem("timer1_value") || 0;
                  $('<?= '.' . timer . $row[0] ?>').val(value);
                  $.ii('<?= t . $row[0] ?>', 36000, function () {
                      var t1v = $('<?= '.' . timer . $row[0] ?>').val();
                      if (t1v < 100) {
                          $('<?= '.' . timer . $row[0] ?>').val(t1v + 1);
                          localStorage.setItem('<?= timer . $row[0] . '_value'?>', t1v + 1)
                      } else {
                          localStorage.removeItem('<?= timer . $row[0] . '_value'?>');
                          $.ii('<?= t . $row[0] ?>');
                      }
                  });
              });
            </script>

but this is unsatisfactory about the bars, all displays on the same value of the var

i dont know what i can do D:

Answer 1

well, i saw the issue here

on my line 21 i fixit like var value = localStorage.getItem('<?= timer . $row[0] . '_value'?>') || 0; var value = localStorage.getItem('<?= timer . $row[0] . '_value'?>') || 0;

thx to @Chris im gonna take the recomendation, thx <3