Display selected dynamic Table data in Bootstrap Modal Popup using jQuery in ASP.Net

here i want to display image also along with other data in modal popup.

    <script type="text/javascript">
        $(function () {
            GetProduct();
        });
  
        function Getproductname(ele) {
            debugger;
            $(ele).html($(ele).closest('div').find('.sproductname').html());
            $(".modal-body #lblName").html("Id is :" + $(ele).data('id') + " Name is : " + $(ele).closest('div').find('.sproductname').html());
            $(".modal-body [id*=imgstrmdl]").attr($(ele).closest('div').find('.pdtimg').html());///image to be displayed here
            $(".modal-body #lblName").css("color", "red");
        }
        function GetProduct() {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "WebService.asmx/GetData",
                data: {},
                dataType: "json",
                success: function (data) {
                    var table = $('#tblgrid');
                    var rows = "";
                    for (var i = 0; i < data.d.length; i++) {
                        rows += "<div class=trclass>" +
                            "<tr><td class=tdcolumn>" +
                            "<div class=tablediv>" +
                            "<div class=Productid>" + data.d[i].ProductId + "</div>" +
                            "<div class=sproductname>" + data.d[i].ProductName + "</div><br />" +
                            "<div class=sproductname>" + data.d[i].ProductQty + "</div><br />" +
                            + ' <img class=pdtimg src="images/loader.gif" data-echo="data:image/jpg;base64,' + data.d[i].Pimage + '" />'                
                            "<div class=sproductname>" + data.d[i].ProductType + "</div><br />" +
                            "</div></td></tr></div>"
                    }
                    table.append(rows);
                },
                failure: function (response) { alert(response.d); },
                error: function (response) { alert(response.d); }
            });
        }
    </script>

    <table id="tblgrid">
    </table>
    <div>
        <div class="modal fade" id="DesPopUp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body" id="listOfNotes">
 		 <img src="#" id="imgstrmdl" />
                        <p>
                            Some text in the modal.</p>
                        <asp:Label ID="lblName" runat="server" />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>