자바스크립트 질문드립니다 채택완료

어떻게 변경되게하면 될까요?

<script>
// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.Line(containers1, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#000',
trailColor: '#fff',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'},
text: {
style: {
// Text color.
// Default: same as stroke color (options.color)
color: '#999',
position: 'absolute',
right: '0',
top: '30px',
padding: 0,
margin: 0,
transform: null
},
autoStyleContainer: false
},
from: {color: '#FFEA82'},
to: {color: '#ED6A5A'},
step: (state, bar) => {
bar.setText(Math.round(bar.value() * 100) + ' % 완료');
}
});

bar.animate(1.0); // Number from 0.0 to 1.0
</script>



<div id="containers1"></div>

갤러리 게시물 리스트의 제목 위에 넣는것입니다 ㅜ
for문이 돌아가니 게시물이 2개이상이되면 진행바가 안나오는 문제입니다.
잘못이해하셧나봐요 ㅜㅜ

for문 안에서 수정해주세요..
containers<? echo $i?>

아이님 알려주신걸 넣으니까 첫번째 게시물만 나오고
두번째거는 아직도 안나오네요 ㅜㅜ도저히안되서 게시판 전체 소스 올립니다ㅜ
[code]
<div class="list-body">
<?php
for ($i=0; $i < $list_cnt; $i++) {

//공지글 제외
if($list[$i]['is_notice']) continue;

//라벨 체크
$wr_label = '';
$is_lock = false;
if ($list[$i]['icon_secret'] || $list[$i]['is_lock']) {
$is_lock = true;
$wr_label = '<div class="label-cap bg-orange">Lock</div>';
} else {
if ($wr_id == $list[$i]['wr_id']) {
$wr_label = '<div class="label-cap bg-green">Now</div>';
} else if ($list[$i]['icon_hot']) {
$wr_label = '<div class="label-cap bg-red">Hot</div>';
} else if ($list[$i]['icon_new']) {
$wr_label = '<div class="label-cap bg-blue">New</div>';
}
}

// 링크이동
$list[$i]['target'] = '';
if($is_link_target && !$list[$i]['is_notice'] && $list[$i]['wr_link1']) {
$list[$i]['target'] = $is_link_target;
$list[$i]['href'] = $list[$i]['link_href'][1];
}

// 썸네일
$wr_vicon = ($is_vicon && ($list[$i]['as_list'] == "2" || $list[$i]['as_list'] == "3")) ? '<i class="fa fa-play-circle-o wr-vicon"></i>' : ''; // 비디오 아이콘
$thumb = apms_wr_thumbnail($bo_table, $list[$i], $thumb_w, $thumb_h, false, true); // 썸네일
$wr_thumb = ($thumb['src']) ? '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" class="wr-img">' : '<div class="thumb-icon'.$fa_color.'"><div class="wr-fa">'.$fa_photo.'</div></div>';

// 날짜
$wr_date = ($is_date) ? '<div class="wr-date en">'.date($is_dtype, $list[$i]['date']).'</div>' : '';

// 회원사진
$wr_mb = '';
if($is_mb) {
$wr_mb = apms_photo_url($list[$i]['mb_id']);
$wr_mb = ($wr_mb) ? '<span class="wr-mb"><img src="'.$wr_mb.'"></span>' : '<span class="wr-mb"><i class="fa fa-user"></i></span>';
}

?>


<div class="list-row">
<div class="list-col">
<div class="list-box<?php echo ($wr_id == $list[$i]['wr_id']) ? ' active' : '';?>">
<div class="list-front">
<div class="list-img">
<a href="<?php echo $list[$i]['href'];?>"<?php echo $list[$i]['target'];?><?php echo $is_modal_js;?>>
<?php if($is_masonry && $thumb['src']) { ?>
<div class="list-thumb">
<?php echo $wr_label;?>
<?php echo $wr_vicon;?>
<?php echo $wr_date;?>
<?php echo $wr_thumb;?>
</div>
<?php } else { ?>
<div class="imgframe">
<div class="img-wrap">
<?php echo $wr_label;?>
<?php echo $wr_vicon;?>
<?php echo $wr_date;?>
<div class="img-item">
<?php echo $wr_thumb;?>
</div>
</div>
</div>
<?php } ?>
</a>
<?php if ($is_checkbox) { ?>
<div class="list-chk">
<input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>">
</div>
<?php } ?>


</div>

<?php echo $is_shadow; //그림자 ?>
<div class="list-text">
<?php if($is_category) { ?>
<div class="div-title-underline-thin font-12">
<?php echo ($list[$i]['ca_name']) ? $list[$i]['ca_name'] : '미분류';?>
</div>
<div class="clearfix"></div>
<?php } ?>
<div id="containers<? echo $i?>"></div>
<div class="list-desc">
<h2>
<a href="<?php echo $list[$i]['href'];?>">
<?php echo $list[$i]['subject'];?>
</a>
</h2>

</div>
<div class="list-info font-12">
<div class="pull-left">
<?php echo $wr_mb;?>
<?php echo ($is_name) ? $list[$i]['name'] : ''; ?>
</div>
<div class="pull-right en font-14">
<?php if($is_dpoint) { ?>
<i class="fa fa-gift green"></i>
<?php echo $list[$i]['as_down'];?>
<?php } ?>
<?php if($is_down) { ?>
<i class="fa fa-download skyblue"></i>
<?php echo $list[$i]['as_download'];?>
<?php } ?>
<?php if($is_visit) { ?>
<i class="fa fa-share navy"></i>
<?php echo ($list[$i]['wr_link1_hit'] + $list[$i]['wr_link2_hit']);?>
<?php } ?>
<?php if($is_good) { ?>
<i class="fa fa-heart orangered"></i>
<?php echo $list[$i]['wr_good'];?>
<?php } ?>
<?php if($is_nogood) { ?>
<i class="fa fa-meh-o"></i>
<?php echo $list[$i]['wr_nogood'];?>
<?php } ?>
<?php if($is_hit) { ?>
<i class="fa fa-eye violet"></i>
<?php echo $list[$i]['wr_hit'];?>
<?php } ?>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
<div class="clearfix"></div>
<?php if (!$is_list) { ?>
<div class="wr-none">게시물이 없습니다.</div>
<?php } ?>
</div>
[code]

<script>
// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.Line(containers1, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#000',
trailColor: '#fff',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'},
text: {
style: {
// Text color.
// Default: same as stroke color (options.color)
color: '#999',
position: 'absolute',
right: '0',
top: '30px',
padding: 0,
margin: 0,
transform: null
},
autoStyleContainer: false
},
from: {color: '#FFEA82'},
to: {color: '#ED6A5A'},
step: (state, bar) => {
bar.setText(Math.round(bar.value() * 100) + ' % 완료');
}
});

bar.animate(1.0); // Number from 0.0 to 1.0
</script>

스크립트 소스도 for 문 안에 넣어서
아래와 같이 수정해주세요..
var bar = new ProgressBar.Line(containers<? echo $i?>, {

스크립트를 for문안에 어떻게 넣으라는 말씀이신지 모르겠습니다ㅜㅜ
아직도 못하구있어요 ㅜㅜㅠ