Как ОТДЕЛЬНО (РАЗДЕЛИТЬ) вывести данные массива в ячейки таблицы html

Речь идет о корзине заказов. Массив переменной "cart" формируется и выводиться его имя (мне нужно только имя) по нажатию на товар, а точнее на кнопку купить. Вывод происходит в виде строки данных (имен)... теперь основной вопрос, как эти данные раскидать в ячейки таблицы html отдельно друг от друга?????

$.getJSON('product.json', function(data) {
  var product = data;
  checkCart();
  showCart();

  function showCart() {
    var out='';
    for(var key in cart){
      out+= product[key].name;
  }
  $('#my-cart').html(out);
}
});





function checkCart() {
  //Проверяем наличие корзины в localStorage
  if(localStorage.getItem('cart') != null) {
    cart = JSON.parse (localStorage.getItem('cart'));
  }
}

тут код на кнопки

$('document').ready(function(){
  loadCanopy();
  loadRig();
  loadReserved();
  checkCart();

});

function loadCanopy() {
  //Выгружаются данные из Canopy.Json
    $.getJSON('Canopy.json', function (data) {
        var out = '';
        for (var key in data) {
            out+='<div class="Canopy">';
            out+='<H1>'+data[key]['name']+'</H1>';
            out+='<p><b>'+data[key]['description']+'</b></p>';
            out+='<p><b>Cost:'+data[key]['cost']+'</b></p>';
            out+='<img src="'+data[key].image+'">';
            out+='<button class="add" data-art="'+key+'">Take</button>';
            out+='</div>';
        }
        $('#txt_1').html(out);
        $('button.add').on('click', addToCart);

}
function addToCart() {
  //Добавляем товар в корзтну
  var articul = $(this).attr('data-art');
  cart[articul] = 1;
  localStorage.setItem('cart', JSON.stringify(cart));
  console.log(cart);
}
function checkCart() {
  //Проверяем наличие корзины в localStorage
  if(localStorage.getItem('cart') != null) {
    cart = JSON.parse (localStorage.getItem('cart'));
  }
} ```
Пока все работает и все выводиться но не могу понять как теперь распределить эти данные в форму html, а именно таблицу((((