For in loop looping through array but not JS function

Question

I am using Plotly.js to render some stock data. I want to have a total of 5 charts without repeating myself. So I made an array giving a key and value pair of each link I am going to make the call for.

var links = {
  'microsoft':'https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=MSFT&apikey=APIKEY&datatype=csv',
  'apple': 'https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=MSFT&apikey=APIKEY&datatype=csv',
  'tesla':'https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=MSFT&apikey=APIKEY&datatype=csv',
  'amazon':'https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=MSFT&apikey=APIKEY&datatype=csv',
  'facebook':'https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=MSFT&apikey=APIKEY&datatype=csv'
};

From there I use a for in loop to cycle through each key value pair with my plotly function in between.

for (var key in links) {
  //url of the data I am passing
  Plotly.d3.csv(links[key], function(err, rows){

  function unpack(rows, key) {
    return rows.map(function(row) {
      return row[key];
    });
  }

  var trace = {
    x: unpack(rows, 'timestamp'),
    close: unpack(rows, 'open'),
    high: unpack(rows, 'high'),
    low: unpack(rows, 'low'),
    open: unpack(rows, 'close'),

    // cutomise colors
    increasing: {line: {color: 'black'}},
    decreasing: {line: {color: 'red'}},

    type: 'candlestick',
    xaxis: 'x',
    yaxis: 'y'
  };

  var data = [trace];

  var layout = {
    dragmode: 'zoom',
    showlegend: false,
    xaxis: {
      rangeslider: {
         visible: false
     }
    }
  };
  //this key is the value of the id of the html element
  Plotly.plot(key, data, layout);
  });;
}

This function runs fine but only prints the first pair in the DOM. I want all 5. Im not sure what I am doing wrong.

UPDATE:

Here are the html elements I am trying to render these items into.

<div class="container-fluid" id="home__page">
      <div class="row ">
        <div class="col-6">
          <div id="microsoft">

          </div>
        </div>
      </div>
      <div class="row ">
        <div class="col">
          <div id="apple">

          </div>
        </div>
      </div>
      <div class="row ">
        <div class="col">
          <div id="tesla">

          </div>
        </div>
      </div>
      <div class="row ">
        <div class="col">
          <div id="amazon">

          </div>
        </div>
      </div>
      <div class="row ">
        <div class="col">
          <div id="facebook">

          </div>
        </div>
      </div>
    </div>

Answer 1

I never used plotly before, I suspect 2 things, either a fixed id/container is given and overridden, or key is constantly re-assingned. Would you try this, otherwise I'll delete the answer:

for (var key in links) {
  (function(key,links){
//url of the data I am passing
  Plotly.d3.csv(links[key], function(err, rows){

  function unpack(rows, key) {
    return rows.map(function(row) {
      return row[key];
    });
  }

  var trace = {
    x: unpack(rows, 'timestamp'),
    close: unpack(rows, 'open'),
    high: unpack(rows, 'high'),
    low: unpack(rows, 'low'),
    open: unpack(rows, 'close'),

    // cutomise colors
    increasing: {line: {color: 'black'}},
    decreasing: {line: {color: 'red'}},

    type: 'candlestick',
    xaxis: 'x',
    yaxis: 'y'
  };

  var data = [trace];

  var layout = {
    dragmode: 'zoom',
    showlegend: false,
    xaxis: {
      rangeslider: {
         visible: false
     }
    }
  };
  //this key is the value of the id of the html element
  Plotly.plot(key, data, layout);
  });;
  })(key,links)
}