Here I want to display some data on the modal upon clicking a button. Right now nothing happens when clicking a button. Neither it throws error nor it displays modal and data. What might be wrong here.
if(details[i].taskmaster_id && details[i].events.length){
var id = details[i].taskmaster_id
var cleaner = details[i].tm_name
var name = details[i].name
var checkin = details[i].events[j].check_in
var checkout = details[i].events[j].check_out
# this displays right data in console
console.log(id)
console.log(name)
messageCleaner.innerHTML='<button class="btn btn-msg-cleaner btn-sm" id="msg" data-id='+id+' data-cleaner='+cleaner+' data-name='+name+' data-checkin='+checkin+' data-checkout='+checkout+' >Message to Cleaner</button>';
//appending Message to Cleaner button
headerContentJustify.appendChild(messageCleaner);
}
$('#msg').on('click', function(e){
const { id, name, cleaner, checkin, checkout } = e.target.dataset;
$("#sendmessagetocleaner").modal('show')
$('#sendmessagetocleaner').on('shown.bs.modal', function (e) {
$("#cleaner_id").val(id)
$("#cleaner_name").val(cleaner)
$("#sub").val(`${name}${checkin}${checkout}`)
})
});
modal
<inputname="cleaner" id="cleaner_id">
<input type="text" id="cleaner_name" name="subject" class="form-control">
<input type="text" name="subject" id="sub" class="form-control">