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) {
    count++
    var $heart = $(`<div class="heart hidden">♥ +${count}</div>`)
    loves.pop()
    $love.append($heart)
    $heart[0].clientWidth
    $heart.removeClass('hidden')
    setTimeout(function () {
      $heart.addClass('out')
    	$heart.on('transitionend', function (e) {
        var style = getComputedStyle(e.target)
        if (style.opacity == '0') {
        	$(this).remove()
          if (loves.length) {
            createHeart()
          } else {
            isPlaying = false
          }
        }
      })
    }, 1000)
    
  }
}