<div class="container">
    <button onclick="addCard()">เพิ่ม card</button>
    <div class="row" id=card>
    </div>
</div>
<template id="cardTemplate">
      <div class="col">
        <div class="card" style="width: 20rem;">
            <img class="card-img-top" src="http://www.azspagirls.com/files/2010/09/orange.jpg" alt="Card image cap">
            <div class="card-block">
              <h4 class="card-title">Orange</h4>
              <p class="card-text">Price: 200 บาท</p>
              <a href="#" data-name="Orange" data-price="0.5" class="add-to-cart btn btn-primary">Add to cart</a>
            </div>
          </div>
      </div>
</template>

body {
  padding-top: 80px;
}

.show-cart li {
  display: flex;
}
.card {
  margin-bottom: 20px;
}
.card-img-top {
  width: 200px;
  height: 200px;
  align-self: center;
}

function addCard(){
  const template = document.getElementById('cardTemplate')
const list = document.getElementById('card')
const item = template.content.cloneNode(true)
list.append(item)
}