ASP.NET

Hey guys, I'm new to Jquery and I'm trying to use <pre>jCapSlide</pre> in a datalist,

<pre lang="HTML">
<asp:DataList ID="DataListList" runat="server" DataSourceID="ObjectDataSourceList"
                    RepeatColumns="5" CellPadding="5" CellSpacing="5"
                    OnItemDataBound="DataListList_ItemDataBound">
                    <ItemTemplate>
                        <div id="capslide_img_cont" class="ic_container">
                            <asp:Image ImageUrl='<%#Eval("Images.Image.Virtual_FileName") %>' ID="MainImage"
                                CssClass="NewsImage1" runat="server" />
                            <div class="overlay" style="display: none;">
                            </div>
                            <div class="ic_caption">
                                <p class="ic_category">
                                    '<%# Eval("Category.cName")%>'</p>
                                <h3>
                                    '<%# Eval("pTitle") %>'</h3>
                                <p class="ic_text">
                                    '<%# Eval("pTitle") %>'
                                </p>
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:DataList>
</pre>

with this Function

<pre lang="Javascript">
&lt;script type="text/javascript">
    $(function () {
        $("#capslide_img_cont").capslide({
            caption_color: 'white',
            caption_bgcolor: 'black',
            overlay_bgcolor: 'black',
            border: '',
            showcaption: false
        });
    });
        &lt;/script>
</pre>

There are 3 records, this applies on the first one but not the other two,
I think the problem is repeated <pre>id="capslide_img_cont"</pre> but can't seem to fix it.
can you help me out ?
It's deeply appreciated