남은시간 이미지로 표시(역카운트)

안녕하세요........아래 코드는 남은시간을 이미지로 표기해주는 역카운트 소스입니다.
보통 본문에 사용을 하는데 이걸 리스트에 사용할려니 for문에 변수들이 중복으로 섞여서 출력이 안되더라구요.

중복되는 변수명만 중복안되게 찝어주시면 감사하겠습니다 (__);;;;

----------------------------------------------------------------------
<?
$target_time = $product[pr_sdate]; // 종료시간 설정 $target_time = $view[wr_1] 등으로 수정
$left_time = (int)(strtotime($target_time) - $g4['server_time']);
?>

<script type="text/javascript">
<!--
$(document).ready(function() {
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(ignored) {
}

// 남은시간 갱신
var timeLeft = <?=$left_time?>;
var updateLeftTime = function() {

timeLeft = (timeLeft <= 0) ? 0 : -- timeLeft;

if (timeLeft >= 1) {

var days = Math.floor(timeLeft / 86400);
var hours = Math.floor((timeLeft - 86400 * days) / 3600);
var minutes = Math.floor((timeLeft - (86400 * days) - (3600 * hours)) / 60);
var seconds = timeLeft % 60;
var bg_prefix = "<div style=\"width:23px;height:32px;background:url('<?=$g4[path]?>/img/numbers.png') no-repeat scroll ";
var bg_suffix = "px 0px transparent;\"></div>";

$('#td1').html(bg_prefix + (-(Math.floor((days % 100) / 10))*23) + bg_suffix);
$('#td2').html(bg_prefix + (-(days % 10)*23) + bg_suffix);
$('#th1').html(bg_prefix + (-(Math.floor((hours % 100) / 10))*23) + bg_suffix);
$('#th2').html(bg_prefix + (-(hours % 10)*23) + bg_suffix);
$('#tm1').html(bg_prefix + (-(Math.floor(minutes / 10))*23) + bg_suffix);
$('#tm2').html(bg_prefix + (-(minutes % 10)*23) + bg_suffix);
$('#ts1').html(bg_prefix + (-(Math.floor(seconds / 10))*23) + bg_suffix);
$('#ts2').html(bg_prefix + (-(seconds % 10)*23) + bg_suffix);
$('#ts1').html(bg_prefix + (-(Math.floor(seconds / 10))*23) + bg_suffix);
$('#ts2').html(bg_prefix + (-(seconds % 10)*23) + bg_suffix);
$('#left_time').show();
} else {
$('#time_end').show();
$('#left_time').hide();
}

}

updateLeftTime();
setInterval(updateLeftTime, 1000);

});
-->
</script>

<style type="text/css">
.time{position:relative;}
.time .hms{position:absolute}
.time .hms:after{display:block;clear:both;content:''}
.time .hms span{float:left}
.time .hms .timer{width:23px;height:32px;}
.time .hms .timer_day{width:17px;height:32px;margin-right:4px;background:url("<?=$g4['path']?>/img/numbers.png") no-repeat scroll -229px 0px transparent;}
.time .hms .timer_hour{width:29px;height:32px;margin-right:4px;background:url("<?=$g4['path']?>/img/numbers.png") no-repeat scroll -246px 0px transparent;}
.time .hms .timer_min{width:17px;height:32px;margin-right:4px;background:url("<?=$g4['path']?>/img/numbers.png") no-repeat scroll -276px 0px transparent;}
.time .hms .timer_sec{width:17px;height:32px;background:url("<?=$g4['path']?>/img/numbers.png") no-repeat scroll -293px 0px transparent;}
.time .hms .timer_end{width:29px;height:32px;background:url("<?=$g4['path']?>/img/numbers.png") no-repeat scroll -310px 0px transparent;}
</style>


<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" style="margin-left:8px;">
<tr>
<td height="19" valign="top">
<!-- 남은시간 시작 -->
<div id="left_time" class="time">
<div class="hms">
<span id="td1" class="timer"></span>
<span id="td2" class="timer"></span>
<span id="td" class="timer_day"></span>
<span id="th1" class="timer"></span>
<span id="th2" class="timer"></span>
<span id="th" class="timer_hour"></span>
<span id="tm1" class="timer"></span>
<span id="tm2" class="timer"></span>
<span id="tm" class="timer_min"></span>
<span id="ts1" class="timer"></span>
<span id="ts2" class="timer"></span>
<span id="ts" class="timer_sec"></span>
</div>
</div>
<!-- 남은시간 끝 -->
<!-- 종료시 시작 -->
<div id="time_end" class="time" style="display:none">
<div class="hms">
<span class="timer_end"></span>
</div>
</div>
<!-- 종료시 끝 -->
</td>
</tr>
</table>

--------------------------------------------------------------------------------------