I am generating some bootstrap cards using for loop on my flask template. On each card, there is a button which runs an ajax query. What I want to do is show the content retrieved on the card body. The ids of the card body are dynamic since I am generating them via a for loop.
<div>
<h5 id="resultHeader">Results - Men</h5>
<div class="row">
{% for gen in ev_list %}
{% for evt in gen.boys %}
<div class="col-sm-6">
<div class="card result_card">
<div class="card-header">
{{ evt }}
<button class="btn btn-outline-secondary evt float-right" data-event="{{ evt }}" data-id="{{ meet.meetid }}" data-gender="-men">
<i class="fas fa-file-download"></i>
</button>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text" id="result_{{ evt }}">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
{% endfor %}
{% endfor %}
</div>
</div>
jquery:
$('.evt').on('click', function() {
var event = $(this).attr('data-event');
var id = $(this).attr('data-id');
var gender = $(this).attr('data-gender');
var p_text = $('#result_'+$(this).attr('data-event')).text();
console.log('#result_'+$(this).attr('data-event'));
console.log(p_text);
$.ajax({
type: 'POST',
url: '/process',
data: JSON.stringify({ "event" : event, "meetid":id, "gender":gender} ),
contentType: "application/json; charset=utf-8",
dataType: "json",
})
.done(function(data){
$('#result_'+$(this).attr('data-event')).text(data);
});
});
The html on the browser looks as follows:
The console output on the browser from the js script is as follows:
Although the id of the P tag and the id that I am targeting looks similar it seems that the correct element is not picked up by jquery. How can I fix this?
