Like counter with JS/Jquery?

Question

I have several cards on a page and each card has an equal facebook like option, when I click on the image the counter increases 1, however this counting in all the cards and not only in what I clicked and also each time I click up one would like that if the user click once it aumenta um if you click it again diminui um facebook equal like dislike.

Follow an example of what I have today

var count = 0;

$(".click").click(function() {
  count++;
  $(".click").css('opacity', "0.7");
  $(".like").html(count + "Curtidas");
  $(this).off(event);
});

.click {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li class='click'>Clique</li>
    <li class='like'>0 curtidas</li>
  </ul>
</div>

<div>
  <ul>
    <li class='click'>Clique</li>
    <li class='like'>0 curtidas</li>
  </ul>
</div>

<div>
  <ul>
    <li class='click'>Clique</li>
    <li class='like'>0 curtidas</li>
  </ul>
</div>

Answer 1

The problem is that you are losing the reference to the button you are clicking. This $(".like").html(count + "Curtidas"); will get all elements with the class .like.

For your code to work will have to use the $(this) as reference. And for the purpose of returning to 0 just do an if.

Follow the example:

$(function() {
    $('.like').on('click', function() {
        $(this).next('.likes').find('span').text(function() {
            if (parseInt($(this).text()) === 0) {
                return parseInt($(this).text() + 1);
            }
            else {
                return 0;
            }
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li>
      <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt architecto aut eligendi saepe nihil, officiis officia, est! Deserunt cupiditate voluptate necessitatibus. Aspernatur, vitae earum atque hic maxime facere sequi sint!</p>
      <button class="like">Curtir</button>
      <span class="likes"><span>0</span> curtidas</span>
    </li>
  </ul>
</div>

@Edit:

The problem is that you need to save this in some database, will not be able to do only with JS. While refreshing the page will lose all data.

The most coherent is to perform a back-end validation and work with AJAX requests to enter this data.

There you check the identity of the user and if he has already voted, if he has already voted returns 0 to increment, otherwise increments 1 more.

Answer 2

At the event click use the this to get only the element that was clicked. To manipulate the item below, in case the li with class like use the next. The way you did $(".like") was manipulating the value for all items with this class.

$(this).next().html(count + " Curtidas");

Also to "save" the amount of likes in each item, use the attribute date-*, with this you can recover and increase the total of Ikes.

<li class='click' data-like-count="0">Clique</li>

See example working:

$(".click").on('click', function() {
  var count = parseInt($(this).attr("data-like-count"));
  count++;
  $(this).css('opacity', "0.7");
  $(this).next().html(count + " Curtidas");
  $(this).off(event);
  $(this).attr("data-like-count", count);
});

.click {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li class='click' data-like-count="0">Clique</li>
    <li class='like'>0 curtidas</li>
  </ul>
</div>

<div>
  <ul>
    <li class='click' data-like-count="0">Clique</li>
    <li class='like'>0 curtidas</li>
  </ul>
</div>

<div>
  <ul>
    <li class='click' data-like-count="0">Clique</li>
    <li class='like'>0 curtidas</li>
  </ul>
</div>