How to make a function trigger just once?

I have different forms and in each one of the forms i want to generate a span tag after a label.

I am trying to achieve this with jQuery with the following function:

function generate_span(obj){
    var spanPosition = obj;
    var spanText = "<span>In the 'Output text format', user can add replacing vars formated with $catN, N will be the number of the category. The $cat1 is the category with most votes, $cat2, comes second and so on. i.e.: Popular amongst Family with $cat1 and $cat2, or This is great for $cat1 and $cat2 n</span>";
    spanPosition.after(spanText);
    

}

This function i trigger it inside a function that iterates all my forms:

function iterate_output_fields(){
    let outputs = jQuery('.cheryr-ui-repeater-content-box').find('[data-repeater-control-name="output-text-format"] label');
    
    outputs.each(function(e){
        generate_span(jQuery(this));
    })
}

And i am calling this function and those above inside the document ready function

iterate_output_fields();

My function is being triggered and the span is created properly. The issue is the following, i have a function that displays or not some fields of the form depending on the value of a select field.

function handle_select_change(obj) {
    var selectField = jQuery(obj);
    var selectedValue = selectField.val();
    var textareaField = obj.parents('.cheryr-ui-repeater-content-box').find('textarea');
    var outputText = obj.parents('.cheryr-ui-repeater-content-box').find('[data-repeater-control-name="output-text-format"]');
    


    if (selectedValue !== "multiple-choice") {
        textareaField.css("display", "none");
        textareaField.siblings().css("display", "none");
        outputText.css("display", "none");

    } else {
        
        textareaField.css("display", "block");
        textareaField.siblings().css("display", "block");
        if(!textareaField.val()){
            textareaField.attr("placeholder", "everyone:Everyone nfamily-kids:Family with Kids nteens:Teenagers nthrill-seekers:Thrill Seekers ncouples:Couples");
        }
        outputText.css("display", "block");
    }   
    
}

For some reason as the value of my select is changed the span is created again. So if i have a select with value multiple-choice the span is created and this is ok. If then i change the value to another one, the field is hidden, and this is also ok. But if now i change the value again to multiple-choice my function is triggered again and a new span is generated. And now i have two span tags when i should only have one.