I have an audio player that loads an audio playlist dynamically. Everything works fine except for the waveform. The code goes as follows:

var data1 = [{
          href: "../media/song1.mp3",
          name: "Song 1",
          song: "song1.mp3"
      },{
          href: "../media/song2.mp3",
          name: "Song 2",
          song: "song2.mp3"
      }, {
          href: "../media/song3.mp3",
          name: "Song 3",
          song: "song3.mp3"
      }]

        // Create li elements
        for (var i = 0; i < data1.length; i++) {
            var s = data1[i];
            var t = document.createElement('li');
           t.setAttribute("onclick","myFunction()");
           t.setAttribute("id","li-items");
            
            var wavesurfer = document.createElement('div');
            wavesurfer.setAttribute("id","wave");
            
   
            t.dataset.song = s.song;
            t.textContent = s.name;
            t.appendChild(wavesurfer);

            
            document.getElementById('playlist1').appendChild(t);

}

        
var wavesurfer = WaveSurfer.create({
    container: '#wave',
    waveColor: 'grey',
    height: '45',
    progressColor: 'white'
});

wavesurfer.load(" + data1[i].href + ");

NOTE:(The play pause and other control buttons are in a different js file, so I assume that adding 'wavesurfer.play' at the end may be useless but correct me if I'm wrong.)

Something is missing and I can't quite figure what. Any help would be very much appreciated.

Thanks in advance. :)