I want to make a script to insert emojis into textarea when click. But it never works.

Can anybody point me out where am I doing wrong?

Thank you.

<form>
    <button value="😀">😀</button>
    <button value="😂">😂</button>
    <button value="👍">👍</button>
    <br>
    <textarea id="text1" cols="40" rows="3" placeholder="This is some dummy text."></textarea>

</form>

<script type="text/javascript ">
    let currentInput = document.getElementById('text1');

    function insertAtCursor() {
        let cursorPos = currentInput.selectionStart;
        let v = currentInput.value;
        let textBefore = v.substring(0, cursorPos);
        let textAfter = v.substring(cursorPos, v.length);
        currentInput.value = textBefore + this.value + textAfter;

        cursorPos += this.value.length;
        currentInput.focus();
        currentInput.setSelectionRange(cursorPos, cursorPos);
    };


    if (document.querySelector('button')) {
        document.querySelectorAll('button').forEach((elem, i) => {
            elem.addEventListener("click", function(event) {

                insertAtCursor();

            });
        });
    }
</script>