JS - Add & Remove

HTML

<ul class="gList">
  <li><span class="counter"></span><span class="counter2">1</span>
    <button class="goal goal1">Select</button>
    <button class="goal goal2">Remove</button>
  </li>
  <li><span class="counter"></span><span class="counter2">1</span>
    <button class="goal goal1">Select</button>
    <button class="goal goal2">Remove</button>
  </li>
  <li><span class="counter"></span><span class="counter2">1</span>
    <button class="goal goal1">Select</button>
    <button class="goal goal2">Remove</button>
  </li>
  <li><span class="counter"></span><span class="counter2">1</span>
    <button class="goal goal1">Select</button>
    <button class="goal goal2">Remove</button>
  </li>
  <li><span class="counter"></span><span class="counter2">1</span>
    <button class="goal goal1">Select</button>
    <button class="goal goal2">Remove</button>
  </li>
  <li><span class="counter"></span><span class="counter2">1</span>
    <button class="goal goal1">Select</button>
    <button class="goal goal2">Remove</button>
  </li>
  <li><span class="counter"></span><span class="counter2">1</span>
    <button class="goal goal1">Select</button>
    <button class="goal goal2">Remove</button>
  </li>
  <li><span class="counter"></span><span class="counter2">1</span>
    <button class="goal goal1">Select</button>
    <button class="goal goal2">Remove</button>
  </li>
  <li><span class="counter"></span><span class="counter2">1</span>
    <button class="goal goal1">Select</button>
    <button class="goal goal2">Remove</button>
  </li>
  <li><span class="counter"></span><span class="counter2">1</span>
    <button class="goal goal1">Select</button>
    <button class="goal goal2">Remove</button>
  </li>
  <li><span class="counter"></span><span class="counter2">1</span>
    <button class="goal goal1">Select</button>
    <button class="goal goal2">Remove</button>
  </li>
  <li><span class="counter"></span><span class="counter2">1</span>
    <button class="goal goal1">Select</button>
   ...

CSS

* {
  box-sizing: border-box;
}
ul {
  padding: 0;
  margin: 0;
}
ul li {
  width: 33.33%;
  float: left;
  height: 100px;
  padding: 10px;
  border: 1px solid blue;
  position: relative;
  list-style: none;
}
.goal {
  position: absolute;
  bottom: 15px;
  right: 15px;
}
.counter, .counter2 {
  font-size: 20px;
  font-weight: 700;
  position:absolute;
  top:10px;
  left:10px;
}
.selected {
  background: rgba(0, 0, 0, 0.1);
}
.goal2 {
  display: none;
}
.counter2, .gList li.selected:hover .counter2{
  opacity:0;
  
}
.gList li:hover .counter2{
  opacity:1;
}

JavaScript

var n = 0;

$('.goal').on('click', function() {

  var element = $(this);

  if (element.hasClass('goal1')) {
    n = add(element, n);
  }

  if (element.hasClass('goal2')) {
    n = remove(element, n);
  }
});

//////////////////////////////////////////////////////

function add(element, i) {
  i++;
  element.parents('li').addClass('selected');
  element.fadeOut('50', function() {
    $(this).parents('li').find('.goal2').fadeIn('50');
  });
  element.parents('li').find('.counter').text(i);
  $('.counter2').text(i+1);
  if($('li.selected').length >  5){
			$('.goal1').prop('disabled', true);
      $('.counter2').text('');
	}
  return i;
}
function remove(element, i) {
  i--;
  element.parents('li').removeClass('selected');
  element.fadeOut('50', function() {
    $(this).parents('li').find('.goal1').fadeIn('50');
  });

  var cnt = element.parents('li').find('.counter').text();
	var cnt2 = $('.counter2').text();
  element.parents('li').find('.counter').text('');
	$('.counter2').text('');
  
  $('.counter').filter(function() {
    return parseInt(this.innerHTML) > cnt;
  }).each(function() {
    var c = $(this).text();
    $(this).text(--c);
  });
  
  $('.counter2').filter(function() {
			return parseInt(this.innerHTML) > cnt2;
		}).each(function() {
			var c = $(this).text();
			$(this).text(--c);
	});
  
	$('.goal2').prop('disabled', false);
  return i;
}