Access element inside Repeater ItemTemplate using jQuery in ASP.Net

Hi pankaj04,

Check the below sample.

HTML

<asp:Repeater ID="dtlist_products" runat="server">
    <ItemTemplate>
        <div class="product">
            <div class="product-top">
                <figure>
                    <asp:HiddenField ID="hid_packageId" runat="server" Value='<%# Eval("id") %>' />
                    <a href="package-details.aspx?pkno=<%# Eval("id") + "-" + Eval("packageName") %>" title="<%# Eval("packageName") %>">
                        <img src="medImages/<%# Eval("imgUrl") %>" alt="product image" class="product-image">                       
                    </a>
                </figure>
                <a class="btn product-add-btn" id="btn_addtocart"><i class="fa fa-cart-arrow-down" style="font-size: large"></i>Add to Cart</a>
            </div>
            <h3 class="product-title" align="center"><a href="package-details.aspx?pkno=<%# Eval("id") + "-" + Eval("packageName") %>"><%# Eval("packageName") %></a></h3>
            <div class="product-price-container" style="text-align: center !important; width: 100%">
                <span class="old-price" style="width: 50%; text-align: center;">₹&nbsp;<%# Eval("mrp") %></span>
                <span id="productPrice" class="product-price" style="width: 50%">₹&nbsp;<%# Eval("price") %></span>
            </div>
        </div>
    </ItemTemplate>
</asp:Repeater>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("a[id*=btn_addtocart]").click(function () {
            var product = $(this).closest($('div[class=product]'));
            var id = $(product).find($('[id*=hid_packageId]')).val();
            var price = $(product).find($('[id*=productPrice]')).html().replace(/\&nbsp;/g, ' ');
            alert("Id : " + id + "\nPrice : " + price);
        });
    });
</script>

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.AddRange(new System.Data.DataColumn[] {
            new System.Data.DataColumn("id"),
            new System.Data.DataColumn("packageName"),
            new System.Data.DataColumn("imgUrl"),
            new System.Data.DataColumn("mrp"),
            new System.Data.DataColumn("price") });
        dt.Rows.Add(1, "Pack 1", "", 100, 500);
        dt.Rows.Add(2, "Pack 2", "", 25, 200);
        dtlist_products.DataSource = dt;
        dtlist_products.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As System.Data.DataTable = New System.Data.DataTable()
        dt.Columns.AddRange(New System.Data.DataColumn() {
            New System.Data.DataColumn("id"), 
            New System.Data.DataColumn("packageName"), 
            New System.Data.DataColumn("imgUrl"), 
            New System.Data.DataColumn("mrp"), 
            New System.Data.DataColumn("price")})
        dt.Rows.Add(1, "Pack 1", "", 100, 500)
        dt.Rows.Add(2, "Pack 2", "", 25, 200)
        dtlist_products.DataSource = dt
        dtlist_products.DataBind()
    End If
End Sub

Screenshot