Dynamic bootstrap cards with javascript

I have here a json file and this content should get rendered inside of bootstrap cards.

[{
    "scripts": {
        "web3py": [
            {
                "thumbnail": "images/thumbnails/sendetherweb3py.png",
                "scriptName": "send Native",
                "description": "send native with web3py",
                "link": "https://jsonformatter.org/img/tom-cruise.jpg"
            },
            {
                "thumbnail": "images/thumbnails/sendtokenweb3py.png",
                "scriptName": "send token",
                "description": "send erc20 token with web3py",
                "link": "https://jsonformatter.org/img/tom-cruise.jpg"
            },
            {
                "thumbnail": "images/thumbnails/swapnativeweb3py.png",
                "scriptName": "swap native token dex",
                "description": "swap eth for erc20 token",
                "link": "https://jsonformatter.org/img/tom-cruise.jpg"
            },
            {
                "thumbnail": "images/thumbnails/swaptokenweb3py.png",
                "scriptName": "swap erc20 token on dex",
                "description": "swap erc20 token with erc20 token",
                "link": "https://jsonformatter.org/img/tom-cruise.jpg"
            }
        ],
        "web3js": [
            {
                "thumbnail": "images/thumbnails/swaptokenethers.png",
                "scriptName": "swap token on dex",
                "description": "swap erc20 token with token on a dex",
                "link": "https://jsonformatter.org/img/tom-cruise.jpg"
            },
            {
                "thumbnail": "images/thumbnails/swapnativeethers.png",
                "scriptName": "swap native",
                "description": "swap native for token on dex",
                "link": "https://jsonformatter.org/img/tom-cruise.jpg"
            },
            {
                "thumbnail": "images/thumbnails/sendtokenethers.png",
                "scriptName": "send ERC20 token",
                "description": "send erc20 token with ethers",
                "link": "https://jsonformatter.org/img/tom-cruise.jpg"
            },
            {
                "thumbnail": "images/thumbnails/sendnativeethers.png",
                "scriptName": "send native",
                "description": "send Native ETH with ethers",
                "link": "https://jsonformatter.org/img/tom-cruise.jpg"
            }
        ]
    }
}]

Inside scripts I have 2 categories, web3py and web3js with 4 items in it. Now i want to render web3py inside a row that than contains 4 cards and another row web3js that contains also 4 cards.

How can I render bootstrap cards in Javscript based on the content from my json file?

I want to do this dynamically so in case i add more items to web3py or web3js, i want the cards to be created dynamically.

So what would be the best way to create those 4 cards inside a row using javascript?

Card looks like this

<div class="card" style="width: 18rem;">
  <img src=${thumbnail} class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">${scriptName}</h5>
    <p class="card-text">${description}</p>
    <a href=${link} class="btn btn-primary">Go somewhere</a>
  </div>
</div>

This here is my Javascript file

async function getScript(){
    const scripts = await fetch('./scripts.json')
    const response = await scripts.json()
    //console.log(response[0])
    const scripta = response[0]['scripts']['web3py']
    const image = response[0]['scripts']['web3py'][0]['thumbnail']
   
    const title = response[0]['scripts']['web3py'][0]['scriptName']
    const description = response[0]['scripts']['web3py'][0]['description']
    console.log(title)


    let content = '';

scripta.forEach(p => {
  content += `
    <div id="keyBoard" class="col-md-4 mt-2">
              <div class="card" style="width: 18rem;">
                  <img src="${image}" class="card-img-top img-fluid" alt="keyboard">
                  <div class="card-body">
                      <h5 class="card-title" id="itemName">${title}</h5>
                      <p class="card-text" id="itemDesc">${description}</p>
                      <p class="card-text"></p>
                      <a href="#" class="btn btn-primary" id="addCart">Add to cart</a>
                  </div>
              </div>
          </div>
  `
});

document.querySelector("#shop").innerHTML = content;
    

}
getScript()

the problem is that this function prints out the 1st item 4 times in 1 row instead of the 1 item each in 1 row