Lottie Button Animation in Post Loop

Question

I have a dynamic post loop with text and I want to put a lottie animation button in it. Each post in the loop has a dynamic data attribute data-post_id. When the button is clicked, a class is added to that particular button, and when it is clicked again, it is removed.

My issue is that if I use the data-post_id value for the lottie location parameter, nothing shows up, and if I use the button class as the location param, the lottie button only shows up for the first post in the loop.

What am I doing wrong?

Here's what I got so far:

/* Play an animation on each click */
var iconContainer = document.querySelector(".bodymovinanim");
var buttonNumber = iconContainer.getAttribute('data-post_id');
// var buttonNumber = document.querySelector(".bodymovinanim");

var buttonAnim = bodymovin.loadAnimation({
  container: buttonNumber,
  renderer: "svg",
  loop: false,
  autoplay: false,
  path: "https://assets8.lottiefiles.com/datafiles/SkdS7QDyJTKTdwA/data.json"
});

// Check initial state
if (iconContainer.classList.contains("liked")) {
    buttonAnim.goToAndStop(50, true);
  } else {
    buttonAnim.goToAndStop(0, true);
  }


// click animation
iconContainer.addEventListener("click", function () {
  if (iconContainer.classList.contains("liked")) {
    buttonAnim.playSegments([50, 0], true);
    iconContainer.classList.remove("liked");
  } else {
    buttonAnim.playSegments([0, 50], true);
    iconContainer.classList.add("liked");
  }
  
});

body {
  font-family: Roboto;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.post-loop {
  display: flex;
  flex-direction: row;
}

.post {
  padding: 15px;
  margin: 5px;
  border: 1px solid gray;
}

.bodymovinanim {
  max-width: 50px;
  margin-bottom: 30px;
  cursor: pointer;
  
}

p {
  font-size: 12px;
  text-transform: uppercase;
  opacity: 0.6;
  letter-spacing: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.3/lottie_svg.min.js"></script>
<div class="post-loop">
  <div id="post-1" class="post">
    <p>Post 1</p>
    <div class="bodymovinanim" data-post_id="44178"></div>
  </div>
  <div id="post-2" class="post">
    <p>Post 2</p>
    <div class="bodymovinanim" data-post_id="44179"></div>
  </div>
</div>