i want to create checkbox inside a button

i have created checkbox inside button i have already assigned some task to button , now problem is as I check on checkbox it is affecting my button's functionality here is code i wrote for

let btn = `<div class = "btn-btn-div${index}"> </div>`;
    eachDiv.insertAdjacentHTML("beforeend", btn);
    let { varients } = dataObject;
    varients.forEach((keys) => {
        let buttonHtml = document.querySelector(`.btn-btn-div${index}`);
        buttonHtml.innerHTML += `<button id="${keys.id}${index}" class="btn-class${index}" style="border: solid black"> ${keys.title}
        <span><input type="checkbox" id="check-inside-btn${index}" value = "${keys.id}${index}">
        <label for="check-inside-btn${index}"></label>
        </span></button>        
        `;
        // console.log(buttonHtml);
    });

I want as I click on checkbox it gave me id of that checkbox and does not affect the functionality of button