Bootstrap карусель 2 элемента на слайд javascript для цикла

У меня есть массив; это выглядит так:

array = [
{
    id:1,
    metadata:['object','object']
},
{
    id:2,
    metadata:['object','object']
},
{
    id:3,
    metadata:['object','object']
}]

вот что я делаю:

array.forEach(function(elem){
      output_info +=`<div class = "col-md-12">
          <div id = "myCarousel" class = "carousel slide" data-ride = "carousel">
            <ol class = "carousel-indicators">
             <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
             <li data-target = "#myCarousel" data-slide-to = "1"></li>
             <li data-target = "#myCarousel" data-slide-to = "2"></li>
            </ol>


            <div class = "carousel-inner">`


      elem.metadata.forEach(function(trip){
        output_info += each_metadata_html(trip)
      })
      output_info += `</div>
      <a class = "left carousel-control" href = "#myCarousel" data-slide = "prev">
        <span class = "glyphicon glyphicon-chevron-left"></span>
        <span class = "sr-only">Previous</span>
        </a>
        <a class = "right carousel-control" href = "#myCarousel" data-slide = "next">
        <span class = "glyphicon glyphicon-chevron-right"></span>
        <span class = "sr-only">Next</span>
      </a>
    </div>
  </div>`
  })
  console.info("this is output", output_info)
  $('#results').html(output_info) then I throw this inside my results tab. 

Что выглядит так

 <div class = "row" id = "results"></div>

each_devices_html принимает объект метаданных.

function each_metadata_html(elem){
  return `<div class = "item">
          <p>`+elem.name+` </p>
      </div>`
}

Проблема: Код не отображает карусель; но вместо этого это выглядит так:

элемент выглядит таквсе сложено вместе ..

Я пытаюсь сделать следующее: с данным массивом выше:

Я хочу иметь возможность. В этом случае я хотел бы иметь возможность отображать 3 разных карусели на одной странице; затем карусель с двумя метаданными на слайд.