facebook reaction buttons / javascript gets called only once in PHP loop

I'm trying integrate facebook animated reaction emoji's to my website and suprised that there are not many sources about it. Actually I'm almost done. I found nice script and modified it in parts to my purpose and happy to share it with you. But it only works in the way I want for one post. There is a problem when the page has multiple posts that can be liked. I ve found that javascript doesnt gets called more than one times inside php loop and dont know why. I both tried to keep javascript externally and internally. Didnt work. Here is my code. For demo purpose I have added some php lines inside html section in snippet. Any ideas?

'use strict';
(function() {
  var likeLink = document.querySelector('.Like__link');
  likeLink.addEventListener('mouseenter', function() {
    likeLink.classList.remove('js-hover');
  });
  likeLink.classList.remove('js-hover');

}());

.Like {
  position: relative;
  display: inline-block;
  margin-top: 5rem;
}
.Like__link {
  cursor: pointer;
}
.Emojis {
  position: absolute;
  left: 0;
  bottom: 120%;
  -webkit-transform: translate3d(-10%, 0, 0);
  transform: translate3d(-10%, 0, 0);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: .125rem;
  border-radius: 100rem;
  -webkit-transition: .3s .3s;
  transition: .3s .3s;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 2px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
}
.Emojis:hover,
.Like__link.js-hover ~ .Emojis,
.Like__link:hover ~ .Emojis {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  opacity: 1;
  visibility: visible;
}
.Emoji {
  position: relative;
  width: 3rem;
  height: 3rem;
  color: #ffd972;
  cursor: pointer;
  -webkit-transition-delay: .6s, .3s;
  transition-delay: .6s, .3s;
  -webkit-transition-duration: 0s, .3s;
  transition-duration: 0s, .3s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0) scale(0.3);
  transform: translate3d(0, 100%, 0) scale(0.3);
}
.Emojis:hover .Emoji,
.Like__link.js-hover + .Emojis .Emoji,
.Like__link:hover + .Emojis .Emoji {
  -webkit-transform: none;
  transform: none;
  opacity: 1;
}
.Emoji .icon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition: -webkit-transform .2s ease;
  transition: -webkit-transform .2s ease;
  transition: transform .2s ease;
  transition: transform .2s ease, -webkit-transform .2s ease;
}
.Emoji:hover .icon {
  -webkit-transform: scale(1) translate3d(0, -10%, 0);
  transform: scale(1) translate3d(0, -10%, 0);
}
.Emojis:hover .Emoji:nth-of-type(1),
.Like__link:hover + .Emojis .Emoji:nth-of-type(1) {
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1);
  transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1);
}
.Emojis:hover .Emoji:nth-of-type(2),
.Like__link:hover + .Emojis .Emoji:nth-of-type(2) {
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-delay: 0.02s;
  transition-delay: 0.02s;
  -webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.2);
  transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.2);
}
.Emojis:hover .Emoji:nth-of-type(3),
.Like__link:hover + .Emojis .Emoji:nth-of-type(3) {
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -webkit-transition-delay: 0.04s;
  transition-delay: 0.04s;
  -webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.4);
  transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.4);
}
.Emojis:hover .Emoji:nth-of-type(4),
.Like__link:hover + .Emojis .Emoji:nth-of-type(4) {
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-delay: 0.06s;
  transition-delay: 0.06s;
  -webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.6);
  transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.6);
}
.Emojis:hover .Emoji:nth-of-type(5),
.Like__link:hover + .Emojis .Emoji:nth-of-type(5) {
  -webkit-transition-duration: 0.6s;
  transition-duration: 0.6s;
  -webkit-transition-delay: 0.08s;
  transition-delay: 0.08s;
  -webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.8);
  transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.8);
}
.Emojis:hover .Emoji:nth-of-type(6),
.Like__link:hover + .Emojis .Emoji:nth-of-type(6) {
  -webkit-transition-duration: 0.7s;
  transition-duration: 0.7s;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
  -webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 2);
  transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 2);
}
.Emoji--like {
  /* color: $c-blue; */
}
.Emoji--love {
  /* color: $c-red; */
}
.icon {
  background-image: url("https://media.giphy.com/media/xT9DPr2QnsfTFoykFO/giphy.gif");
  background-repeat: no-repeat;
}
.icon--like {
  background-position: -6px -6px;
}
.icon--heart {
  background-position: -68px -4px;
}
.icon--haha {
  background-position: -129px -6px;
}
.icon--wow {
  background-position: -191px -6px;
}
.icon--sad {
  background-position: -252px -5px;
}
.icon--angry {
  background-position: -314px -6px;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  margin: 0;
  background-color: #fff;
  color: #222;
  text-align: center;
}
.intro {
  width: 80%;
  max-width: 30rem;
  padding-bottom: 1rem;
  margin: 0 auto 1em;
  padding-top: .5em;
  text-transform: capitalize;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.3);
}
.intro small {
  display: block;
  opacity: .5;
  font-style: italic;
  text-transform: none;
}
.info {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0;
  padding: 1em;
  font-size: .9em;
  font-style: italic;
  font-family: serif;
  text-align: right;
  opacity: .5;
}
.info a {
  color: inherit;
}
kbd {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.05);
  color: #666;
  text-shadow: 1px 1px #fff;
  padding: 1px 4px;
  border-radius: 2px;
  box-shadow: inset 1px 1px 3px -1px rgba(0, 0, 0, 0.5);
}

<!DOCTYPE html>

<html>

<head>
  <title>TODO supply a title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <?php //queries here. $entries=... foreach ($entries as $item) { ?>
  <!-- beginning of foreach loop-->
  <script>
    // in normal this block is activeve to prevent initial appear but commented now.  
     // var likeLink = document.querySelector('.Like__link');                             likeLink.classList.remove('js-hover');
  </script>
  <div class="box">
    <div class="Like"><a class="Like__link js-hover">Like <kbd>hover me!!</kbd></a>
      <div class="Emojis">

        <div class="Emoji Emoji--like">
          <div class="icon icon--like"></div>
        </div>
        <div class="Emoji Emoji--love">
          <div class="icon icon--heart"></div>
        </div>
        <div class="Emoji Emoji--haha">
          <div class="icon icon--haha"></div>
        </div>
        <div class="Emoji Emoji--wow">
          <div class="icon icon--wow"></div>
        </div>
        <div class="Emoji Emoji--sad">
          <div class="icon icon--sad"></div>
        </div>
        <div class="Emoji Emoji--angry">
          <div class="icon icon--angry"></div>
        </div>
        <script>
          // in normal Im putting the javascript here. and it gets called only one for some raeson.
        </script>
      </div>
    </div>
  </div>
  <?php } ?>
  <!-- end of foreach loop-->
</body>

</html>

reference of the code