Text Entry Box disappears when next is selected

I’m using the following JavaScript to have a dynamic Text Entry box when “other” is selected. If the user selects, “other” but doesn’t type anything in the text entry box, the box disappears when the user hits the “next” button. The text entry is required when other is selected, and I don’t want users to be confused by the disappearing text entry box if they accidentally hit ‘next’ before typing in their response. 
 

Qualtrics.SurveyEngine.addOnReady(function () {
    // Hide the text box initially
    var text_box = this.getChoiceContainer().querySelector(".TextEntryBox");
    if (text_box) {
        text_box.hide();
    }

    // Identify the "Other" choice (usually the last one, e.g., index - 1)
    var n_choices = this.getChoices().length;
    var other_choice_id = n_choices; 
    
    // Listen for clicks on the choices
    this.questionclick = function (event, element) {
        if (element.type == "radio" || element.type == "checkbox") {
            // Check if the clicked element is the 'other' option
            if (element.id.split("~")[2] == other_choice_id) {
                if (element.checked) {
                    text_box.show();
                } else {
                    text_box.hide();
                    text_box.value = ""; // Clear text on deselection
                }
            } else {
                // If a different option is selected, hide and clear 'other'
                text_box.hide();
                text_box.value = "";
            }
        }
    };
});