Load text option for multiple choice (single and multiple answer) on click

Hello guys!
I have the following code to load the text box for multiple choices on click, for the vertical options of multiple and single answer choices:

jQuery("#" + QID + " .InputText ").hide();
jQuery("#" + QID + " input[type='radio']").each(function(){

if(jQuery(this).prop("checked") == true)
{
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").show();
}
else
{
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").val('');
jQuery("[id*='"+v1+"~TEXT']").hide();
}
});


jQuery("#" + QID + " .Selection ").on("click change",function(){

jQuery("#" + QID + " input[type='radio']").each(function(){

if(jQuery(this).prop("checked") == true)
{
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").show();
}
else
{
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").val('');
jQuery("[id*='"+v1+"~TEXT']").hide();
}
});
});

});

However, when I change the type to either vertical or column, the code doesn't work properly - text boxes only show up on clicked items after I try to move on and validation doesn't allow me.

Beyond that, I want to have the text box always appear below ALL the choices, so that it is a large text box that doesn't meddle in the space between choices.

Is there any way to do any of these?