How not to remove words after space?

Question

Here while displaying the variable on modal upon clicking on the button I got some issue. var name = details[i].name it gives the exact full value but when I display this data on modal it only displays the first word. The words after the first word or space all removing automatically. What's wrong here with my code ?

if (details[i].taskmaster_id && details[i].events.length) {
    var name = details[i].name
    var status = details[i].status
    console.log('status', status)
    console.log(name) //displays full word here 

    messageCleaner.innerHTML = '<button class="btn btn-msg-cleaner btn-sm" id="msg" data-name=' + name + ' data-status=' + status + '>Message to Cleaner</button>';
    //appending Message to Cleaner button
    headerContentJustify.appendChild(messageCleaner);
}

$(document).on('click', '#msg', function (e) {
    const {
        name,
        status
    } = e.target.dataset;
    $("#sendmessagetocleaner").modal('show')
    $('#sendmessagetocleaner').on('shown.bs.modal', function (e) {
        console.log(name) // displays only first word here
        //if the word is john doe I only john here
        $("#cleaner_name").val(name)
        $("#sub").val(`${name}`)
    })

});

Answer 1

You are missing the double quote:

messageCleaner.innerHTML='<button class="btn btn-msg-cleaner btn-sm" id="msg" 
data-name="'+name+'" data-status="'+status+"
'>Message to Cleaner
</button>';

Without it, the value of the attribute is not grouped, but it's only the first word until the space. The second word is another attribute in itself.