title: AJAX in Django - Clicking an element updates all counters tied to the update script. How can I prevent this?
body: <p>I'm doing a small project, learning how to use AJAX and it turned out to be a little uncomfortable. When I press the like button, the counter increases or decreases in all the elements. For example if I like question 1, in the question 2 and 3 the like counter also changes and uses the same counter as the one in question 1. How can I avoid it?</p>
  
  <p>This is my script:</p>
  
  <pre><code>  $(".like-button").click(function(e){
    e.preventDefault();
    $.ajax({
      type: 'POST',
      url: "/like/",
      data: {'slug': $(this).attr('name'), 'csrfmiddlewaretoken': '{{csrf_token}}'},
      dataType: "json",
      success: function(response){
        sl = $(".show-likes");
        sl.html(response.likes_count);
      },
      error: function(rs, r){
        alert(rs.responseText);
      }
    });
  });
  </code></pre>
  
  <p>This is my html template:</p>
  
  <pre><code>{% for tweet in tweets %}
    &lt;!--Card--&gt;
    &lt;div class="card col"&gt;
        &lt;!--Card content--&gt;
        &lt;div class="card-body"&gt;
            &lt;!--Title--&gt;
            &lt;h4 class="card-title"&gt;{{tweet.title}}&lt;/h4&gt;
            &lt;!--Text--&gt;
            &lt;p class="card-text"&gt;{{tweet.text}}&lt;/p&gt;
          &lt;button
            type="button"
            name="{{tweet.slug}}"
            class="btn btn-primary like-button"&gt;Likes
            &lt;span
            class="show-likes"&gt;
              {{tweet.total_likes}}
            &lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;hr&gt;
  
  {% endfor %}
  </code></pre>
  
  <p>Inside of the like button's code, I have a  for showing "total_likes".</p>
  
  <p>And how could I add a little more real-time updating to this? I'm using Django as the Backend.</p>
  
  <p>Thank you very much for your time and have an excellent day.</p>