Repeat html elements inside of a JavaScript for loop

Question

I have an addresses array that consists of 15 addresses of type string. I'm trying to dynamically create html elements repeating up to the length of my addresses array. Right now, I grabbed my container-lg class that's been written inside of my html page, created a div element and added classes to that div that was created dynamically.

html
<div class="container-lg">
</div>

JS
let container = document.querySelector(".container-lg")
let div = document.createElement("div");
div.classList.add("card", "card-body", "mb-3");

I then added a for loop with the addresses array as the condition. I defined the div.innerHTML with back ticks with the hope that the div would repeat 15 times (same as the length of my array), but I'm only creating the div once inside my for loop after appending div to the container. I know I'm missing a step or two, but I can't seem to figure out why I can't get the div element to repeat.

for (let i = 0; i <= addresses.length; i++) {
  console.log(addresses[i]);
  div.innerHTML = `<div class="mx-auto" style="width: 500px; margin-top:50px;">
  <div class="input-group">
     <div class="input-group-prepend">
        <span class="input-group-text">Starting Address</span>
     </div>
     <input class="form-control" type="text" placeholder="Start Address" id="startaddress">
  </div>
  <br/>
  <div class="input-group">
     <div class="input-group-prepend">
        <span class="input-group-text">Destination Address</span>
     </div>
     <input class="form-control" type="text" placeholder="Destination Address" id="destAddress">
  </div>
  <hr/>
  <div class="card" style="width: 18rem;">
     <div class="card-body">
        <h5 class="card-title">Distance <span id="distance"></span></h5>
     </div>
  </div>
  <br/>
  <div class="card" style="width: 18rem;">
     <div class="card-body">
        <h5 class="card-title">Trip Time <span id="time1"></span></h5>
     </div>
  </div>
</div>`;
container.appendChild(div);

Answer 1

You just create one div element and changing its innerHTML in for loop. You have to create div element in for loop

html

<div class="container-lg"></div>
            

JS

let container = document.querySelector(".container-lg");
for (let i = 0; i <= addresses.length; i++) {
  let div = document.createElement("div");
  div.classList.add("card", "card-body", "mb-3");
  console.log(addresses[i]);
  div.innerHTML = `<div class="mx-auto" style="width: 500px; margin-top:50px;">

  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">Starting Address</span>
    </div>
    <input class="form-control" type="text" placeholder="Start Address" id="startaddress">
  </div>
  <br />
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">Destination Address</span>
    </div>
    <input class="form-control" type="text" placeholder="Destination Address" id="destAddress">
  </div>
  <hr />
  <div class="card" style="width: 18rem;">
    <div class="card-body">
      <h5 class="card-title">Distance <span id="distance"></span></h5>
    </div>
  </div>
  <br />
  <div class="card" style="width: 18rem;">
    <div class="card-body">
      <h5 class="card-title">Trip Time <span id="time1"></span></h5>
    </div>
  </div>`;
      container.appendChild(div);
    }