How to display Bootstrap cards by categories

Question

I'm using the following code to display bootstrap cards in HTML I found that code here.

How can I categorize the cards to show them separately in different HTML files. e.g. 1.html, 2.html, 3.html, and so on...

var img = "https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg?v=47faa659a05e";
const teamDataOne = [
  {
    name: "#0",
    title: "Element 0",  
    link: "go:el0",
    imgClass: "cero",
  },
  
    {
    name: "#1",
    title: "Element 1",  
    link: "go:el1",
    imgClass: "uno",
  },
    
    
];

const container = document.getElementById("teamRowOne");

teamDataOne.forEach(result => {
  // Construct card content
  const content = `
<div class="col-6 col-sm-4">  
    <div class="card darkolorbg text-white card-canal">
        <a class="card-link text-white" href="${result.link}">
        <div class="card-body">
        <div class="d-flex justify-content-center">
            <img class="canal-img ${result.imgClass}" src="${img}" alt="">
        </div>
            <div class="d-flex justify-content-center"><h5>${result.name}</div>
        </div>
        </a>
        </div>
</div>
    `;

  // Append newyly created card element to the container
  container.innerHTML += content;
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="teamRowOne"></div>