jquery操作div的问题

[wnf2009]

最近项目里有一个留言模块。我是用下拉div做的。循环出每一个div，一个div就是一个话题，随后旁边有下拉图标，绑定jquery的slideDown，显示出该话题的回复。问题是，如果循环出了很多话题，jquery就只对第一个层有效果。。。。如何做到点击不同的下拉图标，显示该话题的回复

<s:iterator value="page.resultlist">
	<div id="topic" style=" background-image:url(img/topic_background.jpg); margin-top:20px; margin-right:20px;border:#FF9900 thin solid">
	<img src="img/question.jpg" /><font style="font-weight:bold; ">${title}</font><br/>
	     ${content}
	<div style=" float:right; margin-top:-10px"><img id="mark" src="img/down.jpg" /></div>
	<div id="reply" style=" background-color:white;">
	<img src="img/reply.jpg" />
	</div>
	</div>
	</s:iterator>

$(document).ready(
		function(){
			$("[id='reply']").hide();
		}
	);
	$(document).ready(
		function(){
			$("#mark").click(
				function(){
					$("#reply").slideDown("slow",function(){
						$("#mark").attr("src","img/up.jpg");
					});
				}
			);
		}
	);
	$(document).ready(
		function(){
			$("#mark").click(
				function(){
					if($("#mark").attr("src")=="img/up.jpg"){
						$("#reply").slideUp("slow",function(){
							$("#mark").attr("src","img/down.jpg");
						});
					}
				}
			);
		}
	);

[zell419]

id是唯一的 。
一组元素用class 。