JQuery not working for script in component

Hi! I have tried adding jquery in canvas as well as in index.html I am adding it in canvas like this- canvas = editor.Canvas; const script1 = document.createElement('script'); script1.src = 'https://code.jquery.com/jquery-3.6.0.min.js'; canvas.getDocument().head.appendChild(script1);

and in html page I have added it as script tag - <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

now , I have a component inside which I am defining a script.

editor.DomComponents.addType('foo-button', {
        model: {
            defaults: {
                tagName: "button",
                classes: 'foo',
                //name: "Button",
                content: "Button",
                script: function() {
                    $('.foo').click(function(){
                        alert("Meow");
                    });
                }
            }
        }
    })
    editor.BlockManager.add("button1", {
        label: "Button",
        content: { type: 'foo-button' }
    });

but it is still giving me error - Uncaught ReferenceError: $ is not defined

What is it that I am doing wrong? Please help.