How to get textbox value into php query from javascript & html

Question

Great day :) I want to get 'id='countryname_" + counter + "'' value from javascript,then pass the value to ajax function.I have tried few methods but its doesn't work.can you please help me to get a great output.

<div class="row">
<div class="col-md-6">
<label>Name</label>
<input type="text" id='name' name="Name" value="<?php echo $name; ?>">
</div>
</div>
<table>
<tr>
<td> </td>
<td>
Select:
<select id="ail_select" name="ail_select">
<option value="">--- Select ---</option>
<option value="Access card">Access card</option>
<option value="Vehicle">Vehicle</option>
</select>
</td>
</tr>
</table>
<button type="button" class='btn btn-success addmore'>+ Add More</button>
<td><button type="button" style ='background-color: #f44336;' class='btn btn-danger delete'>- Delete</button></td>
<br>
<div class="row">
<div class="col-sm-6">
<span class="fw-separator"></span>
<button class="previous-form action-button color-bg" id ="sub"; onclick ="getdet()" name="sub">Update Details</button>
</div>

$(document).ready(function()
{
$(".delete").on("click", function() {
$(".case:checkbox:checked").parents("tr").remove();
$(".check_all").prop("checked", false);
check();
});
var counter = $("table tr").length - 1;
$(".addmore").on("click", function(){
var ail = $("#ail_select").val();
if (ail.length > 0) {
counter++;
var data = "<tr><td><input type='checkbox' class='case'/></td><td><span id='snum" + counter + "'>" + ail + ".</span></td>";
data += "<td><input class='form-control' type='text' id='countryname_" + counter + "' name='countryname[]' required value='<?php echo $datval; ?>'/></td>";
data += "</tr>";
$("table").append(data);
// var datval = $('#datval').val();
var val = document.getElementById("countryname_" + counter + "").value;
}
});
});
//......ajax..
function getdet()
{
var datval = $('#datval').val();
var name = $('#name').val();
var result={"name": name};
$.ajax({
url: "sample.php",
type: "POST",
data: {"name": name,},
success: function () {
console.log('Updated');
},
error: function (err)
{
console.log(err);
}
});
}