Displaying each array item in a different div

Another way is to create elements on runtime with the great advantage: you do not need divs to be present (and in a finite number) in your scaffolding, their number will depend on the number of your chords.

const chordsArray = ['C', 'Dm', 'Em', 'F'];
const container = document.getElementById('container');

for(let i=0; i < chordsArray.length; i += 1){
  let chord = document.createElement('div');
  chord.innerHTML = chordsArray[i];
  container.appendChild(chord);
}

<div id="container"></div>

A quick and dirty way of doing this:

const chordsArray = ['C', 'Dm', 'Em', 'F'];
const chordBox = document.getElementsByClassName('chord-box');

for(let i = 0; i < chordBox.length; i++) {
  chordBox[i].innerText = chordsArray[i];
}

<div class="chord-box"></div>
<div class="chord-box"></div>
<div class="chord-box"></div>
<div class="chord-box"></div>

Thoughts

Notice that I changed the id to class; the id attribute should only ever exist on 1 element at a time. It is an identifier, whereas, class represents a group, or class of elements.

This example assumes that you're going to have an equal number of divs as you have elements in the array; this is a very naive way of thinking, the divs should probably be put in as you need them:

const chordsArray = ['C', 'Dm', 'Em', 'F'];
const chordsContainer = document.getElementById("chords-container");

for(let i = 0; i < chordsArray.length; i++) {
  chordsContainer.innerHTML += '<div>' + chordsArray[i] + '</div>';
}

<div id="chords-container"></div>

Hope this helps!

you could use this code that generates the boxes dynamically

var chordsArray = ['C', 'Dm', 'Em', 'F'];
var bodyElement = document.getElementsByTagName("body")[0];


for(var i = 0; i < chordBox.length; i++) {
    var chordBox = document.createElement("div");
    chordBox.className = "chord-box";
    chordBox.innerHTML = chordsArray[i];
    bodyElement.appendChild(chordBox);
}

In this case, I add the boxes into the body element.

Good question. You could try something like this by looping through your chord array and generating HTML from it.

const html = ['C', 'Dm', 'Em', 'F'].map(chord => {return `<div id='${chord}'>${chord}</div> `}).join('')
const chordsContainer = document.getElementById("chords-container");
chordsContainer.innerHTML += html

To break it down:

1. Create a array ['C', 'Dm', 'Em', 'F']
2. Iterate through each chord using map naming each item as it comes out chord
3. Generate the html by returning each time <div id='${chord}'>${chord}</div>
4. Join the Array in a string of HTML .join('')
5. Finally, add the newly generated html to the chordsContainer

Read more on map -> Javascript Array.map() on Mozilla MDN

I've changed id with class, to put each value of an array into a corresponding div, you can use JavaScript to loop through the array and assign each value to the innerText property of its corresponding div.

const chordsArray = ['C', 'Dm', 'Em', 'F'];
const chordBoxes = document.querySelectorAll(".chord-box");

// for loop
for (let i = 0; i < chordsArray.length; i++) {
  chordBoxes[i].innerText = chordsArray[i];
}

// forEach loop
chordsArray.forEach((value, index) => {
  chordBoxes[index].innerText = value;
});

<div class="chord-box"></div>
<div class="chord-box"></div>
<div class="chord-box"></div>
<div class="chord-box"></div>