Control de tiempo

[novo34]

Amigos, tengo un problema con un codigo, espero me puedan ayudar.

Lo que hace es sacar de la base de datos los coches disponibles, luego coloca una imagen de cada uno para poder alquilarlos, una vez alquilado debe marcar el porcentaje del tiempo transcurrido segun el tiempo que lo alquilaron.

El problema es que no logro hacer que marque el tiempo transcurrido de cada uno, solo me sale de uno de los coches.

Código HTML:

<div class="row">
    <div class="col-xs-12">
     <div>
        <ul class="ace-thumbnails clearfix">
          <?php
            $coches = ProductData::getAll(1);
          ?>
 
            <?php if (count($coches)>0): ?>
                <?php foreach($coches as $coche):?>
                  <?php $sell = SellData::getByCar($coche->id); ?>
                  <?php if ($coche->name == $coche->name): ?>
                    <li style="border: solid white;" !important>
                      <div>
                        <img width="200" height="200" alt="200x200" src="storage/products/<?php echo $coche->image;?>" />
                        <div class="text">
                          <div class="inner">
                            <span><?php echo $coche->name;?></span>
 
                            <br />
                            <!-- <a href="#table-Coche-Time?coche=<?php $coche->id; ?>" class="blue" data-toggle="modal"></a> -->
                            <a href="javascript:void(0);" data-toggle="modal" data-target="#Coche-Time" onclick="DataForm(<?php echo $coche->id ?>);">
                            <!-- <a data-target="#table-Coche-Time" href="#" class="sepV_a"> -->
                              <i class="ace-icon fa fa-users"></i>
                            </a>
                          </div>
                        </div>
                      </div>
                      <?php if (isset($sell)): ?>
                        <!-- datos del alquiler del coche -->
                        <?php
                            $fechaAlquiler = $sell->created_at;
                            // $tiempoAlquiler = ($sell->tAlquilado);
                            $tiempoAlquilermili = ($sell->tAlquilado)*60000;
                            // echo $fechaAlquiler;
                            // echo " - ".$tiempoAlquiler." - ".$tiempoAlquilermili;
                            $client = PersonData::getById($sell->person_id);
                         ?>
                        <div>
                          <div id="pbar_outerdiv" style="width: 200px; height: 20px; border: 1px solid grey; z-index: 1; position: relative; border-radius: 5px; -moz-border-radius: 5px;">
                            <div id="pbar_innerdiv" style="background-color: lightblue; z-index: 2; height: 100%; width: 0%;"></div>
                            <div id="pbar_innertext" style="z-index: 3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: black; font-weight: bold; text-align: center;">0%</div>
                          </div>
                          <div id="NameClient"><span style="width=200px; height=auto;" !important><?php echo $client->name." ".$client->lastname; ?></span></div>
                          <div id="MinRent"><span style="width=200px; height=auto;" !important><?php echo $sell->tAlquiler." Minutos"; ?></span></div>
                          <div id="MinNow"><span style="width=200px; height=auto;" !important><?php echo "0 Minutos pasados"; ?></span></div>
                        </div>
                        <!-- Script para calcular el tiempo -->
                        <script type="text/javascript">
                            // var fechaAlquiler= '<?php echo strtotime($fechaAlquiler)*1000; ?>';
                            var start = new Date(<?php echo strtotime($fechaAlquiler)*1000;?>);
                            var maxTime = '<?php echo $tiempoAlquilermili; ?>';
                            var timeoutVal = Math.floor(maxTime/100);
                            animateUpdate();
 
                            function updateProgress(percentage) {
                                $('#pbar_innerdiv').css("width", percentage + "%");
                                $('#pbar_innertext').text(percentage + "%");
                            }
 
                            function animateUpdate() {
                                var now = new Date();
                                var timeDiff = now.getTime() - start.getTime();
                                var perc = Math.round((timeDiff/maxTime)*100);
                                console.log(perc);
                                  if (perc <= 100) {
                                   updateProgress(perc);
                                   setTimeout(animateUpdate, timeoutVal);
                                  }
                            }
                        </script>
 
                      <?php endif ?>
                    </li>
                  <?php endif ?>
                <?php endforeach; ?>
            <?php endif ?>
 
        </ul>
      </div>
    </div>
  </div> 

[Triby]

Estás creando todos los contenedores con la misma ID: pbar_innderdiv y pbar_innertext; cada ID debe ser única y es por eso que te funciona solo para un coche, no sé si el primero o el último.

Además, también estás incluyendo el javascript dentro del foreach, si ves el código fuente, verás que aparecen en cada bloque.

Asigna IDs únicas, algo como pbar_innerdivX, pbarinnertextX, donde X es un número o el identificador del coche. Luego, creas un array en javascript con todas las IDs y actualizas cada una con un ciclo forEach()