When the document loads I want to get the attribute href of each button under the class playlist.

my HTML code

    <div class="playlist p-5">

  <div class="song p-3">
    <span><button href="song.mp3" class="songlink btn"> song 1<i class="fa fa-play playbtn"></i></button></span>
    <div class="wavetest"></div>
  </div>

  <div class="song p-3">
    <span><button href="song2.m4a" class="songlink btn"> song 2<i class="fa fa-play playbtn"></i></button></span>
    <div class="wavetest"></div>
  </div>
  
  <div class="song p-3">
    <span><button href="song3.mp3" class="songlink btn"> song 3<i class="fa fa-play playbtn"></i></button></span>
    <div class="wavetest"></div>
  </div>

</div>

my jquery code gives me only href of the first button. here is my jQuery code.

 $(document).ready(function(){
  alert($('.playlist').find('button').attr('href'));
});