using collapse in API called info in bootstrap card

I am studying Full Stack and have some crypto project to do: to call API crypto coins with ajax, search for some definite crypto from API, put to the bootstrap cards, add toggle switch and collapse with additional info from the same API. The collapse do not work.. Tried all possible ways and searched Google for 2 weeks. What is wrong with my code? Will appreciate your help so much!!

this is my code:

let cryptos = []
const baseUrl = 'https://api.coingecko.com/api/v3/coins'
let singleCrypto = {}

showAll()

// SEARCH
function onSubmit(val) {
  console.log('SUBMIT : ', val)
  cryptoContainer.innerHTML = ''

  $.ajax({
    type: 'GET',
    datatype: 'json',
    url: baseUrl + "/" + val,
    success: function (data) {
      singleCrypto = data
      printShow(singleCrypto)
    },
    error: function (error) {
      console.log('error : ', error)
    },
  })
}

function showAll() {
  $.ajax({
    type: 'GET',
    datatype: 'json',
    url: baseUrl,
    success: function (data) {
      cryptos = data
      printShowsAll()
    },
    error: function (error) {
      console.log('error : ', error)
    },
  })
}

function printShowsAll() {
  for (var i = 0; i < cryptos.length; i++) {
    printShow(cryptos[i])
  }
}

function printShows() {

  for (var i = 0; i < cryptos.length; i++) {
    printShow(cryptos[i].crypto)

  }
}

function printShow(crypto) {
  // console.log(crypto)
  cryptoContainer.innerHTML += `
          <div class="col-3">
        <div class="card" style="margin: 10px; border: 1px solid gray">
          <div class="card-body">
          <div id="toggle"></div>
            <h5 class="card-title">${crypto.name}</h5>
            <div class="symbolDV">
              ${crypto.symbol}
            </div>
            <button type="button" class="btn btn-primary" type="button" 
            data-bs-toggle="collapse" data-bs-target="#collapse" aria-expanded="false" 
            onClick=moreInfoPrint(${crypto.id})>MORE INFO </button>
            <div id="collapse"></div>
          </div>
        </div>
      </div>`
}


function moreInfo(data) {
  collapse.innerHTML = `
    <img src="${data.image ? data.image.thumb : ''}" alt="Card image cap">
    <div class="usd">${(data.market_data.current_price.usd) + 'USD'}</div>
    <div class="eur">${(data.market_data.current_price.eur) + 'EUR'}</div>
    <div class="ils">${(data.market_data.current_price.ils) + 'ILS'}</div>
      `
  console.log('moreInfo:', data)
}

function moreInfoPrint(id){
console.log(id)
showAll(moreInfo, id)
}

Clicking on the button (MORE INFO) of “bitcoin” I am supposed to receive info from function moreInfo. instead of this I have at the console:

Uncaught ReferenceError: bitcoin is not defined
    at HTMLButtonElement.onclick (home.html:1:15)
onclick @ home.html:1