JS таймер в цикле PHP foreach

Question

Я сделал PHP foreach l oop, который отображает игры и информацию о них. Информация взята из базы данных и включает дату окончания, в таблице около 5 игр, и все они имеют разные даты окончания. Я сделал таймер JS, который берет конечную дату и ведет обратный отсчет до нее. Пример: (3 дня 5 часов 2 секунды). Но когда я добавляю таймер в PHP l oop, обратный отсчет отображается только до первой игры. Как я могу сделать так, чтобы каждая игра имела обратный отсчет? Таймер и php l oop:

var countDownDate = new Date('{{ $comp->EndDate }}').getTime();
    var x = setInterval(function() {

        // Get today's date and time
        var now = new Date().getTime();

        // Find the distance between now and the count down date
        var distance = countDownDate - now;

        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        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);

        // Display the result in the element with id="demo"
        document.getElementById("demo").innerHTML = days + "d " + hours + "h "
            + minutes + "m " + seconds + "s ";

        // If the count down is finished, write some text
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("demo").innerHTML = "EXPIRED";
        }
    }, 1000);

    <div class="row justify-content-center">
@foreach ($compinfo as $comp)


    <div class="card" style="width: 300px;">
        <img src="{{url('/comp/')}}/{{ $comp->CompID }}.png" name='CompID' class="w-100">
        <div class="card-body text-center">
            <h5 class="card-title">{{ $comp->CompName }}</h5>
            <p class="card-text">Ending: <p id="demo"></p>
            </p>
            <p class="card-text">Pot: {{ $comp->Pot }}</p>

            <form action = "/create" method = "post">
                @csrf
            <button class="btn btn-primary join" type = 'submit' value = "Add student" data-id="{{ $comp->CompID }}">Join</button>
            </form>
        </div>
    </div>

        @if ($loop->iteration % 4 == 0)

</div>