Unable to get the control value from html table row on button click

Unable to get the control value from html table row on button click

Dear All,

I had written the below code to get the text input control value from html table row,  I am able to get the values of other columns except input control .Can any one tell me what's wrong in it.

<!DOCTYPE html>
<html>
<head>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table id="choose-address-table" class="ui-widget ui-widget-content">
    <thead>
        <tr class="ui-widget-header ">
            <th>Name/Nr.</th>
            <th>Street</th>
            <th>Town</th>
            <th>Postcode</th>
            <th>Country</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="nr"><span>50</span>

            </td>
            <td>Some Street 1</td>
            <td>Glas</td>
            <td>G0 0XX</td>
            <td>United Kingdom</td>
            <td><input type="text"  id="'+"txtparticipants"+'" value=" "></td>
            <td><button type="button" class="use-address">Use</button></td>
        </tr>
        <tr>
            <td class="nr"><span>30</span></td>
            <td>Some Street 2</td>
            <td>Glasgow</td>
            <td>G0 0XX</td>
            <td>United Kingdom</td>
            <td><input type="text"  id="'+"txtparticipants"+'" value=" "></td>           
            <td><button type="button" class="use-address">Use</button></td>
        </tr>
    </tbody>
</table>

</body>
<script type="text/javascript" src=" https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('.use-address').click(function () {
    var txtvalue= $(this).closest("tr").find('td:eq(5)').text();
alert(txtvalue);
});

</script>
</html>