Aparecer un contenedo "n" veces

[saulrayados]

Buen dia, tengo un contenedor que quiero hacer que aparezca "n" veces dependiendo el valor que el usuario escriba, mi duda es ¿como lo podria hacer?, ya intente con un for pero no agarra el valor del usuario, soy nuevo en javascript

Código HTML:

<div class="col-md-6">
      <label class="form-label">Número de canciones</label>
      <input type="number" id="numSong" class="form-control">
    </div>
    <br>
    <div class="container-sm" id="div" style="">
      <h5 id="sng">Canción #n</h5>
      <p><div class="row g-3">
        <div class="col">
          <label class="form-label">Nombre de la canción</label>
          <input type="text" class="form-control">
        </div>
        <div class="col">
          <label class="form-label">Artistas</label>
        <input type="text" class="form-control">
        </div>
      </div></p>
      <p><div class="row g-3">
        <div class="col">
          <label class="form-label">Género</label>
          <select name="gender" class="form-control">
            <option selected>Choose...</option>
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
          </select>
        </div>
        <div class="col">
          <label class="form-label">Canción a subir</label>
          <input type="file" class="form-control">
        </div>
      </div></p>
    <br>
    </div>
 

Código Javascript:

function songs() {
  var number = document.getElementById('numSong').value;
  var container = document.getElementById('div');
  var i;
  
  for(i = 1; i <= number; i++) {
    container.style.display = "block";
  }
}