I'm using Symfony and I'm currently trying to show these elements from the database, but there's a twist here, since every one of these elements has a duration, and I have to show a countdown for that duration.

I already implemented the countdown script (even though it still has a few problems) but it only executes with the first value while the fields stays empty in the other rows.

I'll explain the code now: I have many parkings, each parking has many cars (voitures): my page shows the parkings, the cars related to them and for each car its number and a coutdown of the time that car's allowed (the time is registered in a column in the database).

I'm also using cookies in my script to save minutes and seconds so I don't know how to do it for multiple values.
here's a pic of what I did:

> 
> [![enter image description here](https://i.stack.imgur.com/mcGFn.png)](https://i.stack.imgur.com/mcGFn.png)
> 
> 
> 

here's my code (sorry it's messy):

```
{% extends 'Agent/Baseagent.html.twig' %}

{% block title %}Parking index{% endblock %}

{% block body %}

    {% for parking in user.parkings %}
         <h2>Parking</h2>
             {{ parking.libelle }}

              <h2>voitures</h2>
<table id="file_export" class="table table-striped table-bordered">
                <thead>

                <tbody>
            {% for voitures in parking.voitures %}
                <tr>
                <td>
               {{ voitures.matricule }}
                </td>

                <td>
                <div id="timer" class="js-user-rating" data-is-test="{{ voitures.time}}"></div>
                <td class="center"><span id="demo"></span></td>

                 <script>
 var firstTime = true;

function countdown(minutes) {
    var seconds = 60;
    var mins = minutes;

    if(firstTime && getCookie("minutes")&&getCookie("seconds"))
    {
            firstTime = false;

         var seconds = getCookie("seconds");
         var mins = getCookie("minutes");
    }

    function tick() {

        var counter = document.getElementById("timer");
        setCookie("minutes",mins,10)
        setCookie("seconds",seconds,10)
        var current_minutes = mins-1
        seconds--;
        counter.innerHTML = 
        current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
        //save the time in cookie

        if( seconds > 0 ) {
            setTimeout(tick, 1000);
        } else {

            if(mins > 1){

               // countdown(mins-1);   never reach “00″ issue solved:Contributed by Victor Streithorst    
               setTimeout(function () { countdown(mins - 1); }, 1000);

            }
        }
    }
    tick();
}
function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}
 function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}
countdown(55);
                 </script>

                </td>
                </tr>
             {% endfor %}
        {% else %}
            <tr>
                <td colspan="6">no records found</td>
            </tr>
        {% endfor %}
                </tbody>
            </table>{% endblock %}

```

My Voiture Entity 

```
<?php

namespace App\Entity;

use Doctrine\ORM\Mapping as ORM;

/**
 * @ORM\Entity(repositoryClass="App\Repository\VoitureRepository")
 */
class Voiture
{
    /**
     * @ORM\Id()
     * @ORM\GeneratedValue()
     * @ORM\Column(type="integer")
     */
    private $id;

    /**
     * @ORM\Column(type="string", length=200)
     */
    private $matricule;

    /**
     * @ORM\Column(type="datetime")
     */
    private $gareele;

    /**
     * @ORM\ManyToOne(targetEntity="App\Entity\Parking", inversedBy="voitures")
     * @ORM\JoinColumn(nullable=false)
     */
    private $parking;

    /**
     * @ORM\Column(type="boolean")
     */
    private $parked;

    /**
     * @ORM\Column(type="integer")
     */
    private $time;

    public function getId(): ?int
    {
        return $this->id;
    }

    public function getMatricule(): ?string
    {
        return $this->matricule;
    }

    public function setMatricule(string $matricule): self
    {
        $this->matricule = $matricule;

        return $this;
    }

    public function getGareele(): ?\DateTimeInterface
    {
        return $this->gareele;
    }

    public function setGareele(\DateTimeInterface $gareele): self
    {
        $this->gareele = $gareele;

        return $this;
    }

    public function getParking(): ?Parking
    {
        return $this->parking;
    }

    public function setParking(?Parking $parking): self
    {
        $this->parking = $parking;

        return $this;
    }

    public function getParked(): ?bool
    {
        return $this->parked;
    }

    public function setParked(bool $parked): self
    {
        $this->parked = $parked;

        return $this;
    }

    public function getTime(): ?int
    {
        return $this->time;
    }

    public function setTime(int $time): self
    {
        $this->time = $time;

        return $this;
    }

}

```

and my controller (it's nothing special, just get the parkings related to the connected user) :

```
/**
 * @Route("/agent")
 */
class AgentController extends AbstractController
{
    /**
     * @Route("/", name="agent", methods={"GET"})
     */
    public function index(): Response
    {

        $use = $this->get('security.token_storage')->getToken()->getUser();

        $user = $this->getUser();   
        $parkingz=$this->getUser()->getParkings();

        return $this->render('Agent/Agent.html.twig', [
            'user' => $user,
            'parkingz'=>$parkingz,
        ]);
    }

```