Свойство id элементов в документе html должно быть уникальным, и вы выбираете элемент с помощью $("#exec"), выбираете только первый элемент с таким идентификатором.
Вы можете перейти к селекторам классов или используйте несколько идентификаторов и выберите другой селектор:
<body >
<div style="width: 100%;">
<div style="height:700px;overflow:auto;float:left;width: 50%">
<table>
<tr>
<th>Country Name</th>
<th>View</th>
</tr>
{{ range .CountryData }}
<tr>
<td>{{ .Name }}</td>
<td><button class="exec" cid="{{.Id}}">Show</button></td>
</tr>
{{ end }}
</table>
</div>
<div id="response" style="height:700px;overflow:auto;float:left;width: 50%"></div>
</div>
</body>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button.exec").on("click", function() {
var urlData = "/country?cid=" + $(this).attr("cid");
$.ajax({
url: urlData,
method: "GET",
success: function(data) {
$("#response").html(data);
},
});
});
});
</script>
Если нет способа изменить id реквизит, вы можете добавить некоторые другие классы и использовать некоторые другие селекторы. Например - вы можете добавить идентификатор в таблицу, а затем выбрать все кнопки внутри этой таблицы c:
<table id="table-with-buttons">
...
{{ range .CountryData }}
<tr>
<td>{{ .Name }}</td>
<td><button id="exec" cid="{{.Id}}">Show</button></td>
</tr>
{{ end }}
</table>
А внутри своего кода вы можете выбрать все кнопки, используя:
$("#table-with-buttons button").on("click", function() {
....
});