How do I get the value in the button (50 or 49) to append to my div table and the header name as well (Name/Nr.) ?
I need the value in the Input button (50 or 49) to appear in the div table when i click on the "use-address" button and remove it when I Re-click the "use-address" to remove selection:
$(".use-address").click(function() {
var $item = $(this).closest("tr") // Finds the closest row <tr>
.find(".nr") // Gets a descendent with class="nr"
.text(); // Retrieves the text within <td>
$("#resultas").append($item); // Outputs the answer
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="cart" Id="resultas">
<div id="resultas"></div>
</div>
<table id="choose-address-table" class="ui-widget ui-widget-content" border="1">
<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><input type="button" class="nr" value="50"></td>
<td>Some Street 1</td>
<td>Leeds</td>
<td>L0 0XX</td>
<td>United Kingdom</td>
<td>
<button type="button" class="use-address" />
</td>
</tr>
<tr>
<td><input type="button" class="nr" value="49"></td>
<td>Some Street 2</td>
<td>Lancaster</td>
<td>L0 0XX</td>
<td>United Kingdom</td>
<td>
<button type="button" class="use-address" />
</td>
</tr>
</tbody>
</table>
>Solution :
You need to use val(), not text(), to retrieve the value from the related button. In addition you should use text() to set the content of #resultas so that only the last vaule which was clicked is dislpayed.
$(".use-address").click(function() {
var item = $(this).closest("tr").find(".nr").val();
$("#resultas").text((i, t) => t === item ? '' : item);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="cart" Id="resultas">
<div id="resultas"></div>
</div>
<table id="choose-address-table" class="ui-widget ui-widget-content" border="1">
<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><input type="button" class="nr" value="50"></td>
<td>Some Street 1</td>
<td>Leeds</td>
<td>L0 0XX</td>
<td>United Kingdom</td>
<td>
<button type="button" class="use-address" />
</td>
</tr>
<tr>
<td><input type="button" class="nr" value="49"></td>
<td>Some Street 2</td>
<td>Lancaster</td>
<td>L0 0XX</td>
<td>United Kingdom</td>
<td>
<button type="button" class="use-address" />
</td>
</tr>
</tbody>
</table>