javascript - ポスト ループの Lottie ボタン アニメーション

Question

テキスト付きの動的な投稿ループがあり、宝くじのアニメーション ボタンを配置したいと考えています。ループ内の各投稿には、動的データ属性がありますdata-post_id。ボタンをクリックすると、その特定のボタンにクラスが追加され、再度クリックすると削除されます。

私の問題はdata-post_id、lottielocationパラメーターの値を使用すると何も表示されず、ボタン クラスをパラメーターとして使用するとlocation、lottie ボタンがループ内の最初の投稿にのみ表示されることです。

私は何を間違っていますか？

これが私がこれまでに得たものです：

/* 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>