Bootstrap carousel 2 items per slide javascript for loop

Question

I have an array; that looks like this:

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

this is what I'm doing:

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.log("this is output", output_info)
  $('#results').html(output_info) then I throw this inside my results tab. 

Which looks like this

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

each_devices_html takes in an metadata object.

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

Problem: The code doesn't display carousel; but instead it looks like this:

the element looks like this everything is stacked together..

What I'm trying to do is; with the given array above:

I want to be able to. In this case I'd like to be able to display 3 different carousel in one page; then caraousel having 2 metadata per slides.