How to pass ID to below function on Delete click

Hi

htmlTable.Append("<td>" + "<a id='btnEdit' class='btn btn-inverse btn-sm' data-original-title='Edit' title='Edit' ><i class='fa fa-pencil'></i></a> <button type='button' id='btnDel' class='btn btn-danger btn-sm Delete' data-original-title='Delete' title='Delete'><i class='fa fa-trash-o'></i></button>" + "</td>");

<script type="text/javascript">
        //Delete event handler.
        $("body").on("click", "[id*=tbldata] .Delete", function () {
            if (confirm("Do You Want to Delete this Entry?")) {
                debugger;
                var row = $(this).closest("tr");
                var ID = row.find("span").html();
                $.ajax({
                    type: "POST",
                    url: "Budget.aspx/DeleteRecord",
                    data: '{ID: ' + ID + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        row.remove();
                    }
                });
            }
            return false;
        });
    </script>

Thanks