var $love = $('#love')
var $button = $('button')
var loves = []
var count = 0
var isPlaying = false


$button.on('click', addLove)

function addLove() {
  loves.push('love')
 
  playLoves()
}

function playLoves() {
  if (!isPlaying) {
    
  	isPlaying = true
    createHeart()
  }
}

function createHeart() {
  if (loves.length) {
    var $heart = $(`<div class="heart hidden">♥</div>`)
    loves.pop()
    $love.append($heart)
    $heart[0].clientWidth
    
    $heart.removeClass('hidden')
  }
  $heart.on('transitionend', function (e) {
  
  var style = getComputedStyle(e.target)
  if (style.opacity == '0') {
    $(this).remove()
    console.log(loves.length)
    if (loves.length) {
      createHeart()
    } 
    else{
      isPlaying = false
      console.log(isPlaying)
    }
  }
  else if(!$(this).hasClass('out')){
    $heart.addClass('out')
    console.log('123')
  }
})
}