Описание элементов в цикле CSS,JS

Добрый вечер. Есть задача создать библиотеку с музыкой. У блоков будут различные аудио файлы и обложки. Какой способ наиболее оптимален для этого? В моем дилетантском представлении я бы создал, к примеру, 10 одинаковых блоков с одинаковыми классами, меняя background и аудио файлы. Решил попробовать проделать что-то с помощью js

 var music = document.getElementsByClassName("track") as HTMLCollectionOf<HTMLElement>;
  for(var i = 0; i<music.length; i++){
    // music[i].addEventListener('mouseover', function(){
    //   music[i].style.opacity = '0.1';
    //  }) 
    music[0].style.cssText = "background: url('../../assets/img/music/zayn.jpg') center center no-repeat; background-size: cover;";
    music[1].style.cssText = "background:url('../../assets/img/music/james.jpg') center center no-repeat; background-size: cover;";
    music[2].style.cssText = "background:url('../../assets/img/music/juliander.jpg') center center no-repeat; background-size: cover;";
    var play = document.createElement('div');
    play.innerHTML= '<img src="../../assets/img/music/play.png" style=" width: 100px; height: 100px;">';
    play.style.cssText ="margin: auto;";
    play.setAttribute('class','play');
    music[i].appendChild(play);
  } 

То есть я менял обложки,проходя по циклу, хотя,думаю,что мешать css и js, тоже не очень хорошо. Также для всех блоков создал еще один с кнопкой проигрывания,что, кажется уже менее громоздко.

Как правильно это организовать? И правильно ли я понимаю, что в настоящих проектах создается один экземпляр и в цикле всем элементам из базы присваивается этот самый экземпляр?