Множественное fa-heart как увеличение и уменьшение количества

Question

Мне нужно увеличить счетчик значений fa-heart при клике и уменьшить при втором клике.

Проблема в том, что у меня есть несколько fa-heart на одной странице, поэтому я не могу увеличивать / уменьшать fa-heart по щелчку.

Вот моя скрипка ниже

https://jsfiddle.net/mehbub/d9e2qotg/1/

(function() {
  const heart = document.getElementById('heart');
  heart.addEventListener('click', function() {
    heart.classList.toggle('red');
  });
})();

$(document).on('click', ".notliked", function() {
    var $this = $(this);
    $this.removeClass('notliked');
    $this.addClass('liked')
    $count = $('.likes-count');
    $count.text(function(idx, txt) {
    return (+txt == 0) ? 0 : (+txt - 1);
    heart.classList.toggle('grey');

    });

});

$(document).on('click', ".liked", function() {
    var $this = $(this);
    $this.removeClass('liked');
    $this.addClass('notliked');
    $count = $('.likes-count');
    $count.text(function(idx, txt) {
            return +txt + 1;
    heart.classList.toggle('red');

    });

});
$count.text(function(idx, txt) {
   // convert text to number and increment by one
   return +txt + 1;
});

#heart {
  color: grey;  
  font-size: 20px;
}

#heart.red {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<p>
robert stephen</p><i class="fa fa-heart liked heart" id="heart" value="1" ></i>
<span class="likes-count"> 100 </span><br>
<p>
James Camroon</p>
<i class="fa fa-heart liked heart" id="heart" value="1" ></i>
<span class="likes-count"> 101 </span><br>

<p>
John Wick</p>
<i class="fa fa-heart liked heart" id="heart" value="1" ></i>
<span class="likes-count"> 37 </span><br>

<p>
James Bond</p>
<i class="fa fa-heart liked heart" id="heart" value="1" ></i>
<span class="likes-count"> 22 </span><br>

<p>
Avengers</p>
<i class="fa fa-heart liked heart" id="heart" value="1" ></i>
<span class="likes-count"> 90 </span>

Мне нужно индивидуальное увеличение / уменьшение клика для каждого fa-сердца, чтобы изменить цвет на красный при увеличении или на серый при уменьшении

Спасибо

Answer 1

Вы должны удалить дубликат идентификатора heart или просто удалить его, так как у вас уже есть класс heart, затем прикрепить щелчок к этому общему классу и переключить классы liked/notliked, вы можете использовать эти классы как правила в вашем CSS, поэтому нет необходимости в red/grey классах, что-то вроде:

$(document).on('click', ".heart", function() {
  var count = $(this).next('span');

  $(this).toggleClass('notliked liked');

  if ($(this).hasClass('liked')) {
    count.text(Number(count.text()) + 1);
  } else {
    count.text(Number(count.text()) - 1);
  }
});

.heart.notliked {
  color: grey;
  font-size: 20px;
}

.heart.liked {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<p>robert stephen</p>
<i class="fa fa-heart liked heart" value="1"></i>
<span class="likes-count"> 100 </span><br>

<p>James Camroon</p>
<i class="fa fa-heart liked heart" value="1"></i>
<span class="likes-count"> 101 </span><br>

<p>John Wick</p>
<i class="fa fa-heart liked heart" value="1"></i>
<span class="likes-count"> 37 </span><br>

<p>James Bond</p>
<i class="fa fa-heart liked heart" value="1"></i>
<span class="likes-count"> 22 </span><br>

<p>Avengers</p>
<i class="fa fa-heart liked heart" value="1"></i>
<span class="likes-count"> 90 </span>