Eventlistener with If statement

I've got a few loop created elements, with each a "like" system. The page displays the sum of all the likes, and I've put a eventListener to change the total likes if the user likes a card that wasn't liked before.

That part is fine, but if you "unlike" a card it still adds one to the total count. I tried using a If statement in my eventListener which seemed to me as the best solution as a class "Liked" is added and removed when you hit a like.

As the like fontAwesome Icon changes if the card is liked or not, I also tried setting an eventlistener that adds 1 on fa-heart-o and another eventListener that removes 1 on fa-heart

Could someone tell me what's wrong with my if/else statements in the eventListener? (Set as comment at the end of the JS)

The related JS starts at line 78 in this codePen : https://codepen.io/enukeron/pen/qBaZNbb

HTML:

<div class="photoGrid">  </div>
<p id='likeInfo'></p>

Javascript:

const PhotographeID= 82; 

var jsonFile =  {
 "media": 
    [
     { "photographerId": 82, "likes": 82, },
     { "photographerId": 82, "likes": 62, },
     { "photographerId": 82, "likes": 62, }
    ]
} //Ponctu OK
  
const photoLikes= document.getElementById ('photoLikes');
const photoGrid  = document.getElementsByClassName('photoGrid')[0];
const heart=  document.getElementById('heart');
const imageCard  = document.getElementsByClassName('imageCard')[0];
//Ponctu OK
function findId(jsonFile, idToLookFor) {
 var media = jsonFile.media;
     for (var i = 0; i < media.length; i++) {
         if (media[i].photographerId == idToLookFor) {
          
         // Creating Dom Elements
         const imageCard = document.createElement('div');
         imageCard.classList.add('imageCard');
         photoGrid.appendChild(imageCard);
                
         const photoInfos = document.createElement('div');
         photoInfos.classList.add('photoInfos');
         imageCard.appendChild(photoInfos);   
                       
         const photoLikes = document.createElement('input');
         photoLikes.classList.add('photoLikes');
         photoLikes.setAttribute("type", "number");
         photoLikes.setAttribute("value", media[i].likes);
         photoLikes.readOnly = true;
         photoInfos.appendChild(photoLikes);        
          
         const heart = document.createElement('span');
         heart.classList.add('heart');
         photoInfos.appendChild(heart);   
          
         const faHeart= document.createElement('i');
         faHeart.classList.add('fa');
         faHeart.classList.add('fa-heart-o');
         faHeart.setAttribute("aria-hidden", "true" );
         faHeart.setAttribute("id", "faHeart");
         heart.appendChild(faHeart);
  
            // like button functions  
         heart.addEventListener('click', (event) => {
             if( heart.classList.contains("liked")){
               heart.innerHTML='<i class="fa fa-heart-o" aria-hidden="true"></i>';
               heart.classList.remove("liked");
      
                 /*Removes 1 like */
                 var value = parseInt(photoLikes.value, 10);
                 value = isNaN(value) ? 0 : value;
                 value--;
                 photoLikes.value = value;  
                }
  
             else{
                heart.innerHTML='<i class="fa fa-heart" aria-hidden="true"></i>';                
                 heart.classList.add("liked");
    
                 /*adds 1 like */
                 var value = parseInt(photoLikes.value, 10);
                 value = isNaN(value) ? 0 : value;
                 value++;
                 photoLikes.value = value; 
                 }
            }); 
         }  
     }  
 } 
findId(jsonFile, PhotographeID);

//Total likes section
const TotalPhotoLikes= document.querySelectorAll('photoLikes');
const likeInfo= document.getElementById('likeInfo');
const hearts = document.querySelectorAll(".heart");

//Sets initial Total likes 
var sum = 0.0;
$('.photoLikes').each(function() {
  sum += parseFloat(this.value);
} ) ;
likeInfo.textContent= "Total likes:" + sum ;

//Adds like to total if a heart is clicked  
hearts.forEach((span) => span.addEventListener("click", (event) => {
  $('.photoLikes').each(function() {
    sum = sum + (.35);
  } ) ;
  likeInfo.textContent= "Total likes:" + (parseFloat(sum).toFixed(0)) ;
} )) ;


/* Tying to replace the previous EventListener by this to Add or remove a like:

hearts.forEach((span) => span.addEventListener("click", (event) => {
  
  if( heart.classList.contains("liked")){
    $('.photoLikes').each(function() {
      sum = sum + (.35);
    } ) ;
  likeInfo.textContent=  (parseFloat(sum).toFixed(0)) ;
  } ; 
                
else{
  $('.photoLikes').each(function() {
    sum = sum - (.35);
  } ) ;
  likeInfo.textContent=  (parseFloat(sum).toFixed(0)) ;
} ; 
}
*/