Array Of Objects Track List from Play Store

/*Downloaded from https://www.codeseek.co/-J0hn-/array-of-objects-track-list-from-play-store-QdaZpV */
p {
  margin: 0;
}

body {
  margin: 0;
}

ul {
  box-shadow: 0 5px 20px gray;
  background: white;
  list-style: none;
  text-transform: capitalize;
  font-family: sans-serif;
  padding: 0;
  max-width: 450px;
  margin: 0 auto;
}
ul .inline {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 .50em;
  cursor: default;
}
ul .inline:hover {
  background: orangered;
  color: white;
}
ul .inline .track {
  margin-right: 1.2em;
  width: .50em;
  color: gray;
  cursor: pointer;
}
ul .inline .name-time {
  padding: .80em 0;
  margin-right: auto;
  display: flex;
  flex-direction: column;
}
ul .inline .name-time .duration {
  font-size: .80em;
  margin-top: .50em;
}
ul .inline .price {
  background: white;
  color: orangered;
  font-weight: bold;
  border: solid 2px orangered;
  border-radius: 4px;
  padding: .50em 1em;
  cursor: pointer;
}

#total-price {
  position: absolute;
  top: 0;
  left: 0;
  background: orangered;
  color: white;
  padding: 5px 15px;
  margin: 10px;
  width: 60px;
  box-shadow: 0 5px 16px 0 lightgray;
  border-radius: 3px;
  text-align: center;
  font-family: sans-serif;
}

/*Downloaded from https://www.codeseek.co/-J0hn-/array-of-objects-track-list-from-play-store-QdaZpV */
$(document).ready(function() {
  var $ul = $('ul');
  var $template = $('#playlist-template').html();
  var tracks = '';
  
  var qotsa = [
    {
      track:1,
      name: 'turnin on the screw',
      duration: '05:20',
      price: 1.29
    },
    {
      track:2,
      name: 'sick, sick, sick',
      duration: '03:34',
      price: 1.29
    },
    {
      track:3,
      name: 'i\'m designer',
      duration: '04:04',
      price:1.29
    },
    {
      track:4,
      name: 'into the hollow',
      duration: '03:42',
      price: 1.29
    },
    {
      track:5,
      name: 'misfit love',
      duration: '05:39',
      price: 1.29
    },
    {
      track:6,
      name: 'battery acid',
      duration: '04:06',
      price: 1.29
    },
    {
      track:7,
      name: 'make it wit chu',
      duration: '04:50',
      price: 1.29
    },
    {
      track:8,
      name: '3s & 7s',
      duration: '03:34',
      price: 1.29
    },
    {
      track:9,
      name: 'suture up your future',
      duration: '04:37',
      price: 1.29
    },
    {
      track:10,
      name: 'river in the road',
      duration: '03:19',
      price: 1.29
    },
    {
      track:11,
      name: 'run, pig, run',
      duration: '04:39',
      price: 1.29
    },
  ];
  
  function addSong(song) {
    tracks += Mustache.render($template, song);
    $ul.html(tracks);
  }

  // GET TOTAL PRICE OF ALBUM
  const total_price = qotsa.reduce(function(sum, total) {
      return +((sum + total.price).toFixed(2));
  }, 0);
  $('#total-price').html(`Total $${total_price}`);
  
  //LOOP THROUGH THE ARRAY & STORE IN UL
  qotsa.forEach(function(song){
    addSong(song);
  });
  
 //WHEN HOVER, CHANGE THE TRACK NUMBER TO A PLAY BUTTON
  var $div = $('ul').children();
  $div.each(function() {
    var $trackNumber = $(this).find('.track').text();

    $(this).hover(function() {
      $(this).find('.track').text('').addClass('fa fa-play').css('color', 'white');
    }, function() {
      $(this).find('.track').text($trackNumber).removeClass('fa fa-play fa-pause').css('color', 'gray');
    });
  });

  //TOGGLE PLAY/PAUSE BUTTON
  var $span = $div.find('span');
  $span.on('click', function() {
    if ($(this).hasClass('fa fa-play')) {
      $(this).removeClass('fa fa-play').addClass('fa fa-pause');
    } else if ($(this).hasClass('fa fa-pause')) {
      $(this).removeClass('fa fa-pause').addClass('fa fa-play');
    }
  });
  
});