Het toevoegen van event listeners in JS op nog niet gegenereerde HTML

Hoi, ik ben er van op de hoogte dat het niet mogelijk is, direct een event op nog niet gegenereerde DOM in te laden.
Ik heb namelijk een script gemaakt, waar in gebruik maak van een Signature library. Hier mee kan de gebruiker in een <canvas> z'n handtekening zetten, en opslaan als base64_encoded in een hidden input:

const canvas = document.getElementById("signature");
canvas.width = 400;
const signaturePad = new SignaturePad(canvas);
const clearBtn = document.getElementById('clear');
const saveBtn = document.getElementById('save');
const signatureInput = document.getElementById('signature-field');
clearBtn.addEventListener('click', e => {
	e.preventDefault();
	signaturePad.clear();
	signatureInput.value = '';
});
saveBtn.addEventListener('click', e => {
	e.preventDefault();
	let signatureImg = signaturePad.toDataURL();
	signatureInput.value = signatureImg;
});

Dit gebeurt allemaal in een formulier en werkt zoals toebehoren. Helaas heb ik ook wat lastigers, als je namelijk een 'Samen' abonnement wilt afsluiten, dan zou hij in het de lege div `#second-person-bank-data` Ook een signaturePad van de canvas moeten maken, met een clear button en een save button, zoals in het voorbeeld hier boven.
Helaas is het me zowel met jQuery delegate en JS mutation observers niet gelukt. Weet iemand hier meer over en hoe ik dit beter kan oplossen in de aankomende tijd?
Hier is de mutation observer die ik heb geprobeert.

//p2
var target = document.querySelector('#second-person-bank-data');
    // create an observer instance
var observer = new MutationObserver(function (mutations) {
//loop through the detected mutations(added controls)
mutations.forEach(function (mutation) {
	//addedNodes contains all detected new controls
	if (mutation && mutation.addedNodes) {
	mutation.addedNodes.forEach(function (elm) {
		if (elm && elm.id=="signature-p2") {
			const canavas2 = elm;
			const signaturePad2 = new SignaturePad(canavas2);
			const clearBtn2 = document.getElementById('clear2');
			const saveBtn2 = document.getElementById('save2');
			const signatureInput2 = document.getElementById('signature-field-p2');
			clearBtn2.addEventListener('click', e => {
				e.preventDefault();
				signaturePad2.clear();
				signatureInput2.value = '';
			});
			saveBtn2.addEventListener('click', e => {
				e.preventDefault();
				let signatureImg2 = signaturePad.toDataURL();
				signatureInput2.value = signatureImg2;
			});
		}
	});
	}
});
});
// pass in the target node, as well as the observer options
observer.observe(target, {
	childList: true
});

P.S. Ik dit is die signature library: https://github.com/szimek/signature_pad