I'm working on loading data from my database using ajax, but I'm facing an issue with the this method not functioning as expected.
Below is a snippet of my source code:
$(".cancel-btn").click(function() {
var cancelArea = $('.cancel');
let userID = $('.person-title').data('user-id');
$.get(`users/${userID}`).done((docs) => {
$(docs).each((i) => {
$(cancelArea).append(
`<div class='cancel-box text-center' data-sessionID="${docs[i]._id}" onclick='cancelSession()'>
<div class='cancel-trainer'>${docs[i].trainedByName}</div>
<div class='cancel-date'>${docs[i].date}</div>
<div class='cancel-hour'>${docs[i].startTime}</div>
</div>`
);
});
});
});
Additionally, here is the function that I am attempting to execute:
function cancelSession() {
console.log($(this).data('sessionID'));
}
Thank you in advance for your help!