TextInput not working how I expect - HTML5

Hi All,

I am trying to allow users to input a name that will then update Dynamic Text. Before that, however, I simply want to print the user-typed into console, but I can't seem to get this to work. 

My code. This is placed on the second frame of a movie clip that is activated with a button on the main scene: 

this.stop();
var txt_pet1 = document.getElementById("PET1_NAME_TEXT1");

this.NAME_APPLY_BUTTON.on("click", onApply.bind(this));

function onApply(e) {
	var pet1_name = document.getElementById("PET1_NAME_TEXT1").value; 
	console.log(pet1_name);
}

 When the click the "Apply" button, I expect the inputted text to show up but instead I get nothing. I also have an error in console saying "[DOM] Found 2 elements with non-unique id #PET1_NAME_TEXT1" but I don't think this is defined anywhere else.

Any help is appreciated!

Melanie