Lettering.js | use Javascript span injector for radical Web Typography

My Javascript/jQuery gallery only works on localhost. As soon as I try to view the same gallery on my server hosted version of my site it does show the pictures and sections of the pictures, but it is not lined up with eachother like the localhost version site gallery is.

Good Gallery

Wrong Gallery

Here is my page code:

First off, I'm not a web programmer so this may seem trivial. I have a dynamic website that works fine using jquery. But simply declaring the following script:

I'd like to do an animation for my paragraph which's content is being replaced after clicking on a button. So button #start_animation should start the textillate in animation and button #out_animation should cause out animation. And then I click on the third button #replaced_word which replaces the content of my paragraph.

Important: I always click in the same row:

1. #start_animation

2. #out_animation

3. #replaced_word

So the word should come in by an animation (fadeIn) then go out by another animation (fadeOut) then be replaced and then I click again on the first button #start_animation and it goes over and over again. The problem is that it works only for the first time. I mean till I click #start_animation for the second time. I wrote this question before with code but it was way too long so I did it in form of snippet. Any ideas?

Why do the Textillate effects remove the bold formatting from h3 tags in my portfolio and how do you fix it? https://codepen.io/Olliewe88/pen/pgmWor