Multiple countdown timers using a PHP loop - php

Question

What I'm trying to do is output data from my database using PHP. Alongside this data I'd like to include a countdown timer using the data from my database. Naturally, the timer is done using JavaScript but I'm struggling to work out how to include the PHP variable in the JavaScript code and then loop through all my results, including an instance of the timer on each row.
I'm testing over here: http://www.lineswritten.co.uk/Countdown/ - The red 'timer here' is where I'd want the top 4 instances of 'waiting...' to be. These four instances aren't included in my loop.
I presume this would be done with $count++ but I'm not sure how to code this all up.
My JavaScript timer has been grabbed from here: http://jsfiddle.net/HSx9U/
The code is the following:
JavaScript
var count1 = new countDown(new Date('2010/12/11 10:44:59'),'counter1', 'tomorrow 10:45')
,count2 = new countDown(new Date('2010/12/25'),'counter2', 'first christmas day 2010')
,count3 = setTimeout(function(){
return new countDown(new Date('2011/12/25'),'counter3', 'first christmas day 2011');
},2000)
,count4 = setTimeout(function(){
return new countDown(new Date('2100/01/01'),'counter4', 'a new era starts');
},4000);
function countDown(startTime, divid, the_event){
var tdiv = document.getElementById(divid)
,start = parseInt(startTime.getTime(),10)
,the_event = the_event || startTime.toLocaleString()
,to;
this.rewriteCounter = function(){
var now = new Date().getTime()
,diff = Math.round((start - now)/1000);
if (startTime > now)
{
tdiv.innerHTML = diff +' seconds untill ' + the_event;
}
else {clearInterval(to);}
};
this.rewriteCounter();
to = setInterval(this.rewriteCounter,1000);
}
HTML
<div id="counter1">waiting...</div>
<div id="counter2">waiting...</div>
<div id="counter3">waiting...</div>
<div id="counter4">waiting...</div>
HTML Table/PHP loop
<table>
<tr>
<th id="logo">Logo</th>
<th id="name">Name</th>
<th id="discount">Discount</th>
<th id="length">Sale Length</th>
<th id="time">Time Remaining</th>
<th id="what">On What</th>
<th id="small-print">Small Print</th>
<th id="link">Link to Sale</th>
</tr>
while ($row = mysql_fetch_array($result)) {
$discount = $row['discount'];
$product = $row['product'];
$terms = utf8_decode($row['terms']);
$brand_name = $row['brand_name'];
$code = $row['code'];
$link = $row['link'];
$logo = $row['logo'];
$length = $row['length'];
<tr>
<td headers="logo"><?php echo $logo;?></td>
<td headers="name"><p><?php echo $brand_name;?></p></td>
<td headers="discount"><p><?php echo $discount;?></p></td>
<td headers="length"><p><?php echo $length;?></p></td>
<td headers="time"><p style="color:#F00;">timer here</p></td>
<td headers="what"><p><?php echo $product;?></p></td>
<td headers="small-print"><p><?php echo $terms;?></p></td>
<td headers="link"><p>Redeem</p></td>
}
</table>
I presumed I could change the new Date('2010/12/11 10:44:59') to new Date('$newDate') but it didn't work.

Answer 1

Geting stuff from PHP to javascript is best done using PHP's json_encode() function. You can feed it an array like this:
$array = ('item1', 'item2');
echo '<script type="text/javascript">';
echo 'var myarray = '.json_encode($array).';';
// iterate etc here
echo '</script>';