JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
    <input type="text" />
    <textarea rows="10" cols="50"></textarea>
</body>
</html>

JavaScript

$(document).on("ready",function(){
    
    //binds focusin.tada and focusin.other listeners 
    //on document with "input" selector
    $(document).on({
        "focusin" : function(){
            //this should run one time
            //--------------------------------
            $("textarea").val($("textarea").val()+".tada\n");
            $(this).on("focusin", function(evnt){
                evnt.stopPropagation();                
            });
            //--------------------------------
        },

        "focusout" : function(){
            //this should run nonstop {?}
            //-----------------------
            $("textarea").val($("textarea").val()+".other\n");           
            //-----------------------
        }        
    }, "input");

});