"Show" button doesn't work with JSON file data

Question

I want something like this:https://codepen.io/cosminach/pen/ExoWPwN In that codepen, when you click on the button, text is shown, and it works.

<div class="wrap">
<button class="but">SHOW / HIDE</button>
<div class="content">sdfsf</div>
</div>
<div class="hitter">HITTER</div>


$(".but").click (function(){
  // Close all open windows
  $(".content").stop().slideUp(300); 
  // Toggle this window open/close
  $(this).next(".content").stop().slideToggle(300);
  //hitter test// 
  $(".hitter").show()
});

$(".hitter").click (function(){
  // Close all open windows
  $(".content").stop().slideUp(300); 
}); 

But, I want to incorporate data from a JSON file instead of writing the text manually. So, I wrote this code: https://codepen.io/cosminach/pen/KKZaLXW. It doesn't work anymore although it seems easy. What have I done wrong?

        <div class="user-cards" data-user-cards-container></div>
          <template data-user-template>
            <div class="card">
                <button class="but">
                    <div class="header" data-header></div>
                </button>
              <div class="content">
                  <div class="body" data-body></div>
                  
               </div>
            <div class="hitter">HITTER</div>
          </template>
        </div> 


//JQUERY
$(".but").click (function(){
  // Close all open windows
  $(".content").stop().slideUp(300); 
  // Toggle this window open/close
  $(this).next(".content").stop().slideToggle(300);
  //hitter test// 
  $(".hitter").show()
});

$(".hitter").click (function(){
  // Close all open windows
  $(".content").stop().slideUp(300); 
});



//JAVASCRIPT + JSON
        const userCardTemplate = document.querySelector("[data-user-template]")
        const userCardContainer = document.querySelector("[data-user-cards-container]")
        const searchInput = document.querySelector("[data-search]")
        let users = []
        
        fetch("https://jsonplaceholder.typicode.com/posts")
          .then(res => res.json())
          .then(data => {
            users = data.users.map(user => {
              const card = userCardTemplate.content.cloneNode(true).children[0]
              const header = card.querySelector("[data-header]")
              const body = card.querySelector("[data-body]")
              header.textContent = user.userId
              body.textContent = user.title
              userCardContainer.append(card)
              return { title: user.title, userId: user.userId, element: card }
            })
          })```