Get the Clicked Item TextBox Displayed in Repeater Control ASP.Net

I need to implement discussion forum,so I am currently using asp.net repeater control. I have a textbox for adding a reply for each repeater item. Currently I am using a java script and styles for it.

On first load the reply panel would not be visible and if clicked the rely link button it should display only the clicked item textbox panel. Currently it is showing only the first item of repeater even any reply button clicked?

Any thing wrong on this or how I get the exact item ID I clicked in repeater?

    <div id="ViewDiscussion_Panel" runat="server" style="width: 100%; float: left;">
            <asp:Repeater ID="rptDiscussionFolders" runat="server" OnItemCommand="rptDiscussionFolders_ItemCommand" >
   <ItemTemplate>

     <div id="ContentArea" style="float: left; width: 92%; min-height: 80px; height: auto; margin-left: 10px; margin-bottom: 10px;"> 

        <div id="EditReplyItemArea" class="EditReplyItemArea" runat="server" style="margin: 15px 10px 10px 0px">
                                    <asp:TextBox ID="txtCommentItemReply" runat="server" Style="width: 98.8%; height: 1.5em; border: 1px solid gray" title="Add a reply" data-bind="value: text1, valueUpdate: 'keyup'"></asp:TextBox>
                                    <div style="float: right;">
                                        <asp:Button ID="ItemReplySubmit" data-bind="enable: isFormValid" runat="server" Text="Reply" OnClick="ItemReplySubmit_Click" CommandArgument='<%# Eval("ParentFolderID")%>' BackColor="DarkBlue" ForeColor="White" />
                                    </div>
                                     <div style="float: right;">
                                        <asp:Button ID="ItemReplyEdit" data-bind="enable: isFormValid" runat="server" Text="Edit" OnClick="ItemReplyEdit_Click" CommandArgument='<%# Eval("ListID")%>' BackColor="DarkBlue" ForeColor="White" />
                                    </div>
                                </div>

    </div>

 </ItemTemplate>
            </asp:Repeater>
        </div>

Script...

 function EnbaleReplyPanel() {
        $("#ContentArea").addClass("showDivs");
        return false;
    }

Style...

<style type="text/css">
#ContentArea .EditReplyItemArea
{
    display: none;
}
#ContentArea.showDivs .EditReplyItemArea
{
    display: block;
}
</style>

Basically you need to pass an index to the function, and also give your div a unique ID based on that index values...

so the changes will be as below:

Div unique name:

 <div class="CArea" id="ContentArea_<%# Container.ItemIndex + 1 %>" style="float: left;


function EnbaleReplyPanel(indx) {
    $("#ContentArea_" + indx).toggleClass("showDivs");
    return false;
}

Am not sure where are you calling EnbaleReplyPanel from, but you need to pass the same thing from there, so it will be:

EnbaleReplyPanel(<%# Container.ItemIndex + 1 %>);

For the css class names, will be:

<style type="text/css">
.CArea .EditReplyItemArea
{
display: none;
}
.CArea .showDivs .EditReplyItemArea
{
    display: block;
}
</style>