Html Table Row button click event is not working

I am trying to fetch the row data on html button click. Below is my code. Here thr problem is when i click on the send email button page is getting refreshed. Also the click event is not getting fired. Not sure what is worng in this code

script type="text/javascript" src="/_layouts/15/sp.init.js"></script>
<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.core.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js" ></script>
<script type="text/javascript" src="/it/spservices/SiteAssets/JS/jquery.min.js"></script>
<link rel='stylesheet' type='text/css' href='/it/spservices/SiteAssets/JS/EAS.CSS'>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Application.." title="Type in a Application name">

<table id="myTable">
  <tr class="header">
    <th style="width:20%;">Application</th>
    <th style="width:20%;">Status</th>
     <th style="width:20%;">Issue</th>
    <th style="width:20%;">Risk/Impact</th>
    <th style="width:20%;">Resolution</th>
    <th style="width:20%;">SendEmail</th>
  </tr>
</table>

<script type="text/javascript">

    $(document).ready(function () {

  //SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getListData());
    getListData();



    });


function getListData()
{
     var SPContext = SP.ClientContext.get_current();
    var SPWeb = SPContext.get_web();
    var SPLists = SPWeb.get_lists().getByTitle("GetReport"); //Pass the List Name
    var query = new SP.CamlQuery();
    query.set_viewXml('<View><ViewFields><FieldRef Name="Application" /><FieldRef Name="Issue" /><FieldRef Name="Resolution" /><FieldRef Name="Risk_x002f_Impact" /><FieldRef Name="Status" /></ViewFields></View>');
    var items = SPLists.getItems(query);
    SPContext.load(items,'Include(Application,Status,Issue,Risk_x002f_Impact,Resolution)');
    SPContext.executeQueryAsync(sucess, fail);
    function sucess() {
        var application, status, issue, riskImpact, resolution;
        console.log('Number of items in the list' + items.get_count());
        var txtHTML = "";
        var listItemEnumerator = items.getEnumerator();
        while (listItemEnumerator.moveNext()) {
            var item = listItemEnumerator.get_current();
            application = item.get_item('Application');
            status = item.get_item('Status');
            issue = item.get_item('Issue');
            riskImpact = item.get_item('Risk_x002f_Impact');
            resolution = item.get_item('Resolution');

            txtHTML += "<tr>";
            txtHTML += "<td>" + application + "</td>";
            txtHTML += "<td>" + status + "</td>";
            txtHTML += "<td>" + issue + "</td>";
            txtHTML += "<td>" + riskImpact + "</td>";
            txtHTML += "<td>" + resolution + "</td>";
            txtHTML += "<td><input class='emailbtn' type='button' value='SendEmail'/></td>";
            txtHTML += "</tr>";

        }
         $("#myTable").append(txtHTML);

    }

    function fail(sender, args) {

        console.log(args.get_message());
    }

}
     $(".emailbtn").click(function() {
    var $row = $(this).closest("tr"),
        $tds = $row.find("td:nth-child(2)");

    $.each($tds, function() {
        console.log($(this).text());
    });

});

function myFunction() {
    var input, filter, table, tr, td, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }
}

</script>