Display ASP.Net DataList Row (Item) details in JavaScript Alert on Button click using JavaScript and jQuery

Here I have created sample that will help you out.

HTML

<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    <link rel="stylesheet" href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
        media="screen" />
    <script type="text/javascript">
        $(function () {
            $('[id*=book_now]').bind('click', function () {
                var row = $(this).closest('tr');
                var roomType = $(row).find('.roomtype').html().trim();
                var id = $(row).find('.rid').html().trim();
                var facility = $(row).find('.facility').html().trim();
                var rate = $(row).find('.rate').html().trim();
                alert('Id :' + roomType + '\nRoom Type :' + roomType + '\nFacility :' + facility + '\nRate :' + rate);
            });
        });
    </script>
    <asp:DataList ID="ddlist_rooms" runat="server" RepeatColumns="1" RepeatLayout="Table">
        <ItemTemplate>
            <div>
                <h3>
                    <span class="roomtype">
                        <%# Eval("room_type") %></span>
                </h3>
            </div>
            <div>
                <span class="rid" style="visibility: hidden">
                    <%# Eval("id") %></span></div>
            <div class="col-md-3">
                <div class="box2">
                    <img src="Images/home.png" />
                </div>
            </div>
            <div class="col-md-9">
                <div class="points">
                    <div class="col-md-12">
                        <div>
                            <div class="txt-inn4">
                                <i class="fa fa-check-square-o"></i><span class="facility">
                                    <%# Eval("facility") %></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clearfix">
                </div>
                <div class="margin-10">
                    <div class="col-md-2">
                        <p>
                            <div>
                                Price:<a href="#" class="btn1 btn-outlined btn-black" data-wow-delay="0.7s"><span
                                    class="rate">
                                    <%# Eval("rate") %>
                                </span></a>
                            </div>
                        </p>
                    </div>
                    <div class="col-md-2">
                    </div>
                    <div class="col-md-2">
                        <p>
                            <a id="book_now" href="#" class="btn1 btn-outlined btn-black next-step" data-wow-delay="0.7s">
                                Book Now</a>
                        </p>
                    </div>
                    <div class="clearfix">
                    </div>
                </div>
            </div>
            <div class="clearfix">
            </div>
        </ItemTemplate>
    </asp:DataList>
</div>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("Id");
        dt.Columns.Add("room_type");
        dt.Columns.Add("rate");
        dt.Columns.Add("facility");
        dt.Rows.Add("123", "A", "100", "Wifi,Sofa");
        dt.Rows.Add("223", "B", "200", "Sofa");

        ddlist_rooms.DataSource = dt;
        ddlist_rooms.DataBind();
    }
}

Screenshot