Assign more than one button to bindpopup

Question

I have defined two buttons and want them both to be appeared in my bindpopup. Each of them seperately works ok. But when I try to add both of the buttons in the bindpopup, it shows only one of them on the map and inside popup. I do not know how can I solve this problem.

    let btnDelete = document.createElement('button');
    btnDelete.className = 'ti-trash';
    btnDelete.onclick = async () => {
      await api.deleteZone(zone)
      layer.remove()
      }


    let btnEdit = document.createElement('button');
    btnEdit.className = 'ti-pencil';
    btnEdit.onclick = function () {
      layer.editing.enable();
    }



    layer.bindPopup( btnDelete, btnEdit ).openPopup();

Answer 1

As per the docs you can only add one HTMLElement to a popup. So you must append your two buttons to a <div> and add that one to the popup:

let btnDiv = document.createElement('div')
btnDiv.append(btnDelete)
btnDiv.append(btnEdit)
layer.bindPopup( btnDiv ).openPopup();