Adds a text box to the interactive IPA chart at https://www.ipachart.com/ to copy characters you click on

Interactive IPA Chart Textbox.user.js

// ==UserScript==
// @name         Interactive IPA Chart Textbox
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Adds a text box to the interactive IPA chart at https://www.ipachart.com/ to copy characters you click on
// @author       Mihir Dhamankar <[email protected]>
// @match        https://www.ipachart.com/
// @grant        none
// @icon         https://taiwebs.com/upload/icons/typeit-extended220-220.jpg
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
// @homepage     https://gist.github.com/Mdkar/6166a2aa7e7a050d001a2ab7f942a273
// @downloadURL  https://gist.github.com/Mdkar/6166a2aa7e7a050d001a2ab7f942a273/raw/d2df413097c53ff3f81b1647fa4231c30c2ea47a/Interactive%2520IPA%2520Chart%2520Textbox.user.js
// ==/UserScript==

(function() {
    'use strict';
    function addTextBox() {
        var extraIPA = ["ɚ","ɝ","ʰ","ˈ","ˌ","ː"," ̆"]; //add your own characters to make more buttons
        var insertPoint = $("#ezoic-pub-ad-placeholder-115"); //change this to place the textbox somewhere else
        insertPoint.append('<textarea id="typedIPA" style="font-size : 20px;">');
        insertPoint.append('<div id="typedIPAbuttons">');
        var insertButtons = $("#typedIPAbuttons");
        for (var char of extraIPA) {
            insertButtons.append('<button class="IPA" style="font-size : 20px; width : 30px;">'+ char +'</button>');
        }
    }
    function copyToBox(char) {
        var textArea = $("#typedIPA")[0];
        var caretPos = textArea.selectionStart;
        var selectEnd = textArea.selectionEnd;
        var textAreaTxt = $("#typedIPA").val();
        $("#typedIPA").val(textAreaTxt.substring(0, caretPos) + char + textAreaTxt.substring(selectEnd));
        $("#typedIPA").focus(); //comment out this line to stop scrolling up to the textbox every character
        textArea.setSelectionRange(caretPos+1,caretPos+1);
    }
    function changeOnclicks() {
        var buttons = $(".IPA"); //works for the bottom list of characters, just have to click on the character itself not the description
        for (var i = 0; i < buttons.length; i++) {
            $(buttons[i]).click(function () {copyToBox(this.innerText)});
        }
    }
    addTextBox();
    changeOnclicks();
})();