How do I add eventListeners to things that get appended to a page?

Question

Explanation:

I have a shopping cart drawer that will conditionally load a little canvas element depending on if the order_total exceeds $1000 this canvas element is used to create an E-Signature.

The Problem:

When ever you go below the $1000 it will remove this element from the page. And if you go back above it, it will append it to the page. But the script that makes this work does not reappend it's event listeners so when you try to draw a signature in the canvas it responds to no events.

Any ideas would be appreciated, I've spent my brainpower just trying to get to this point. I know the solution is around the corner I just don't know have the right words to describe where I am going wrong.

<div style="max-height: 120px; overflow-y: scroll;">
  <h2>E-Signature Required</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas consequat vulputate. Integer tincidunt dui lacus, sed tincidunt est semper id. Vestibulum ac sem id erat eleifend scelerisque. Vivamus sit amet neque quis arcu faucibus suscipit sit amet ac nulla. Quisque suscipit urna sit amet orci aliquam, id accumsan mauris porttitor. Phasellus consequat augue sit amet arcu sollicitudin, nec interdum leo sollicitudin. Duis nibh sapien, fermentum in mi in, pretium laoreet erat. Donec vel nunc a arcu ultrices maximus in nec erat. Proin sollicitudin nec nisl a fringilla. Nullam rhoncus dui in justo semper tristique. Integer convallis mauris et risus cursus, in efficitur mi vehicula. Maecenas ac mi mattis, gravida metus id, pretium tellus. Curabitur vitae consectetur nisl, non eleifend nulla. Sed non massa felis.</p>
</div>
<div>
 <canvas style="background-color: #fff;" width="360" height="100" id="sig-canvas">
  Get a better browser, bro.
 </canvas>
</div>
<div style="display:flex; gap: 0 1rem;">
 <button style="padding: 0 1rem; flex-grow: 1;" class="button" id="sig-submitBtn">Submit Signature</button>
 <button style="padding: 0 1rem; flex-grow: 1;" class="button" id="sig-clearBtn">Clear Signature</button>
</div>
<div>
 <textarea style="display:none;" id="sig-dataUrl" class="form-control" rows="5">Data URL for your signature will go here!</textarea>
 <img style="display:none;" id="sig-image" src="" alt="Your signature will go here!"/>
</div>
            
<script>
                (function() {
                    window.requestAnimFrame = (function(callback) {
                        return window.requestAnimationFrame ||
                        window.webkitRequestAnimationFrame ||
                        window.mozRequestAnimationFrame ||
                        window.oRequestAnimationFrame ||
                        window.msRequestAnimaitonFrame ||
                        function(callback) {
                            window.setTimeout(callback, 1000 / 60);
                        };
                    })();
                    
                    var canvas = document.getElementById("sig-canvas");
                    var ctx = canvas.getContext("2d");
                    ctx.strokeStyle = "#000";
                    ctx.lineWidth = 2;
                    
                    var drawing = false;
                    var mousePos = {
                        x: 0,
                        y: 0
                    };
                    var lastPos = mousePos;
                    
                    canvas.addEventListener("mousedown", function(e) {
                        drawing = true;
                        lastPos = getMousePos(canvas, e);
                    }, false);
                    
                    canvas.addEventListener("mouseup", function(e) {
                        drawing = false;
                    }, false);
                    
                    canvas.addEventListener("mousemove", function(e) {
                        mousePos = getMousePos(canvas, e);
                    }, false);
                    
                    // Add touch event support for mobile
                    canvas.addEventListener("touchstart", function(e) {
                        
                    }, false);
                    
                    canvas.addEventListener("touchmove", function(e) {
                        var touch = e.touches[0];
                        var me = new MouseEvent("mousemove", {
                            clientX: touch.clientX,
                            clientY: touch.clientY
                        });
                        canvas.dispatchEvent(me);
                    }, false);
                    
                    canvas.addEventListener("touchstart", function(e) {
                        mousePos = getTouchPos(canvas, e);
                        var touch = e.touches[0];
                        var me = new MouseEvent("mousedown", {
                            clientX: touch.clientX,
                            clientY: touch.clientY
                        });
                        canvas.dispatchEvent(me);
                    }, false);
                    
                    canvas.addEventListener("touchend", function(e) {
                        var me = new MouseEvent("mouseup", {});
                        canvas.dispatchEvent(me);
                    }, false);
                    
                    function getMousePos(canvasDom, mouseEvent) {
                        var rect = canvasDom.getBoundingClientRect();
                        return {
                            x: mouseEvent.clientX - rect.left,
                            y: mouseEvent.clientY - rect.top
                        }
                    }
                    
                    function getTouchPos(canvasDom, touchEvent) {
                        var rect = canvasDom.getBoundingClientRect();
                        return {
                            x: touchEvent.touches[0].clientX - rect.left,
                            y: touchEvent.touches[0].clientY - rect.top
                        }
                    }
                    
                    function renderCanvas() {
                        if (drawing) {
                            ctx.moveTo(lastPos.x, lastPos.y);
                            ctx.lineTo(mousePos.x, mousePos.y);
                            ctx.stroke();
                            lastPos = mousePos;
                        }
                    }
                    
                    // Prevent scrolling when touching the canvas
                    document.body.addEventListener("touchstart", function(e) {
                        if (e.target == canvas) {
                            e.preventDefault();
                        }
                    }, false);
                    document.body.addEventListener("touchend", function(e) {
                        if (e.target == canvas) {
                            e.preventDefault();
                        }
                    }, false);
                    document.body.addEventListener("touchmove", function(e) {
                        if (e.target == canvas) {
                            e.preventDefault();
                        }
                    }, false);
                    
                    (function drawLoop() {
                        requestAnimFrame(drawLoop);
                        renderCanvas();
                    })();
                    
                    function clearCanvas() {
                        canvas.width = canvas.width;
                    }
                    
                    // Set up the UI
                    var sigText = document.getElementById("CartDrawer-Note");
                    var sigImage = document.getElementById("sig-image");
                    var clearBtn = document.getElementById("sig-clearBtn");
                    var submitBtn = document.getElementById("sig-submitBtn");
                    clearBtn.addEventListener("click", function(e) {
                        clearCanvas();
                        sigText.innerHTML = "Data URL for your signature will go here!";
                        sigImage.setAttribute("src", "");
                        document.getElementById("CartDrawer-Checkout").disabled = true;
                    }, false);
                    submitBtn.addEventListener("click", function(e) {
                        var dataUrl = canvas.toDataURL();
                        console.log(dataUrl);
                        // Make sure that we arent submitting a blank canvas.
                        if (dataUrl != 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAAXNSR0IArs4c6QAABGJJREFUeF7t1AEJAAAMAsHZv/RyPNwSyDncOQIECEQEFskpJgECBM5geQICBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAAYPlBwgQyAgYrExVghIgYLD8AAECGQGDlalKUAIEDJYfIEAgI2CwMlUJSoCAwfIDBAhkBAxWpipBCRAwWH6AAIGMgMHKVCUoAQIGyw8QIJARMFiZqgQlQMBg+QECBDICBitTlaAECBgsP0CAQEbAYGWqEpQAgQdWMQCX4yW9owAAAABJRU5ErkJggg==') {
                            sigText.innerHTML = dataUrl;
                            sigImage.setAttribute("src", dataUrl);
                            document.getElementById("CartDrawer-Checkout").disabled = false;
                        }
                    }, false);
                    
                })();
            </script>