Multiple Countdown using PHP and Javascript

See more:

Javascript

PHP

I am currently stuck on a problem and not sure how to solve it. I am new to php and javascript coding so do please correct me if there is an easier way to do this.

My problem is that I am trying to get a countdown timer working for multiple data in mysql database. I have already made a successful countdown time function that only works with one data using the if statement in php, but when I try to do it with multiple data using the while statement in php it doesn't work.here is my php code.

//TODAY'S DATE
$today = time();

//FETCHES DATE AND TIME FOR THE EVENT FROM DATABASE
$sql = "SELECT * FROM post";
$result = mysqli_query($conn, $sql);

while ($row = mysqli_fetch_assoc($result)) {
    $title = $row['title'];
    $cname = $row['cname'];
    $team = $row['team'];
    $description = $row['description'];
    $endtime = $row['endtime'];

    echo "<tr>";
    echo "<td width='16%'>Title:</td>";
    echo "<td width='16%'>$title</td>";
    echo "</tr><tr>";
    echo "<td width='16%'>Client name:</td>";
    echo "<td width='16%'>$cname</td>";
    echo "</tr><tr>";
    echo "<td width='16%'>Team:</td>";
    echo "<td width='16%'>$team</td>";
    echo "</tr><tr>";
    echo "<td width='16%'>Description:</td>";
    echo "<td width='16%'>$description</td>";
    echo "</tr><tr>";
    echo "<td width='16%'>End time:</td>";
    echo "<td width='16%'>$endtime</td>";
    echo "</tr><tr>";
    echo"</BR>";
    echo"</BR>";
}

$conn->close();

below is my javascript that suppose to run the count down

var today = new Date();
var DD = today.getDate();
var MM = today.getMonth()+1; //January is 0!
var YYYY = today.getFullYear();
//let get the Difference in Sec btw the two dates
var _DateFromDBProgEndDate = '<?php echo $endtime; ?>';
var ProgEndTime = new Date(_DateFromDBProgEndDate);
var TodayTime = new Date();

var differenceTravel = ProgEndTime.getTime()- TodayTime.getTime() ;
var seconds = Math.floor((differenceTravel) / (1000));
////////////////////////////////
var SecDiffFromToday = seconds;
var seconds = SecDiffFromToday;

function pad(n) {
   // utility function to pad a number to 2 digits:
   return ('0' + n).substr(-2); 
}

function timer() {
    var todaySeconds = Math.floor(new Date().getTime() / 1000);
    // collect the html first in an array
    var html = [];
    // keep track whether there are still counters not yet zero:
    var allDone = true;
    // go through the list of dates:
    endDatesInSeconds.forEach(function (endDateSeconds) {
        var totalSeconds = endDateSeconds - todaySeconds;
        var days        = Math.floor(totalSeconds/24/60/60);
        var seconds     = Math.floor(totalSeconds - days*86400);
        var hours       = Math.floor(seconds/3600);
        seconds         = Math.floor(seconds - hours*3600);
        var minutes     = Math.floor(seconds/60);
        seconds         = seconds % 60;
        // add a part of html
        html.push(
            totalSeconds <= 0 
               ? 'project time Completed'
               : days + ":" + pad(hours) + ":" + pad(minutes) + ":" + pad(seconds));
        // when at least one counter is not complete, we are not done:
        allDone = allDone && totalSeconds <= 0;
    });
    // now put the html in the document:
    document.getElementById('countdown').innerHTML = html.join('<br/>');
    if (allDone) {
        clearInterval(countdownTimer);
    }
}

var countdownTimer = setInterval('timer()', 1000);
<script>

the javascript run the countdown by getting it value from the php (var _DateFromDBProgEndDate = '';)