How to get id when I click Object Card? - ajax

Question

how to get id when I click the card, I get id in concole.log .
but I don't know get id when card was clicked.
here is the code :
$.ajax({
url : 'https://www.thesportsdb.com/api/v1/json/1/search_all_leagues.php?',
type: 'get',
dataType: 'json',
data : {
's' : 'Soccer'
},
success: function(result){
let league = result.countrys;
$.each(league, function(i, data){
$('#club-list').append(`
<div class="col-md-4 p-2">
<div class="card shadow" onCLick="console.log(`+data.idLeague+`)">
<img src="`+ data.strBadge +`" class="card-img-top p-2" alt="...">
<div class="card-body">
<p class="card-text">`+ data.strLeague +`</p>
</div>
</div>
</div>`);
});
$('.card').on('click', function(){
$.ajax({
url : 'https://www.thesportsdb.com/api/v1/json/1/lookup_all_teams.php?',
type: 'get',
dataType: 'json',
data: {
// 'id' : '4328'
'id' : /* HOW TO GET ID FROM CARD WHEN USER CLICK CARD ? */
},
success: function(result){
let team = result.teams;
$.each(team, function(i, data){
$('#club-detail').append(`
<div class="col-md-4 p-2">
<div class="card shadow">
<img src="`+ data.strTeamBadge +`" class="card-img-top p-2" alt="...">
<div class="card-body">
<p class="card-text">`+ data.strTeam +`</p>
</div>
</div>
</div>`);
});
// window.location.href = "league.php";
console.log(team);
}
});
});
}
});
https://www.thesportsdb.com/api/v1/json/1/lookup_all_teams.php?id=4328 /* HOW TO GET ID WHEN USER CLICK CARD ? */
enter image description here

Answer 1

use class instead of id. because multiple id with same key won't work

Answer 2

$.ajax({
url : 'https://www.thesportsdb.com/api/v1/json/1/search_all_leagues.php?',
type: 'get',
dataType: 'json',
data : {
's' : 'Soccer'
},
success: function(result){
let league = result.countrys;
$.each(league, function(i, data){
$('#club-list').append(`
<div class="col-md-4 p-2">
<div class="card shadow" data-id="${data.idLeague}">
<img src="`+ data.strBadge +`" class="card-img-top p-2" alt="...">
<div class="card-body">
<p class="card-text">`+ data.strLeague +`</p>
</div>
</div>
</div>`);
});
$(document).on('click','.card', function(e){
console.log(this.dataset.id);
});
}
});