Incoming transmission - "help!"

I added a ID, As you can see -      <em id="name-alter">
and a rule of JS -      $("#name-alter").addClass("animated hinge");
But I Do Not Get Expected Result of Inserting animated hinge.

ON CODEPEN.io

Here is The Link To my Code.

If You Would Recognize Wisely Then You Will see that The “Second” Line is being Erased after a Couple Of Seconds

<h1> <em id="name-alter text-mid">

Here you’re adding a class (text-mid) in the id name (name-alter) so it is not hooked anymore from jQuery ( $('#name-alter) ^^

Thanks, But it Still doesn’t Work even After I delete “Text-mid” From The Code!

Anybody Here? Can You help me? Please?

Also Another Problem from The same Code:-

Not sure you can animate an EM tag?.. change it to the H1 ?

 <h1 class="text-center" id="name-alter" ><em>The Grand Designer Of E=mc<sup>2</sup>   </em> </h1>

This Works, You Figured it Out which Proves That You are kinda a Real Coder. But I thought that
<em class="name-alter"> Should have also Worked. I meant Developers Should Solve This Kind Of Problems. One day Maybe You or me Will Develop These Problems.

Thanks. Happy Code!

Oh! One More Thing ----- Did You Notice That

The Second Sentence Becomes Invisible After a Couple Of Seconds.? Isn’t it Funny?

Again - Happy Code!