как сделать только кнопку с указанным c id

Question

Я пытаюсь отобразить кнопку после запроса ajax, но я получил две кнопки с тем же значением, мне нужно отобразить только ту кнопку, на которой я нажал, есть ли способ получить идентификатор кнопки и использовать его в id. html (вверх) ??

$('.likes-button').click(function() {
  var csrftoken = $('[name="csrfmiddlewaretoken"]').val();

  var ajaxdata = $(this).attr('data-id');
  var id = $(this).attr('target');


  $.ajax({
    type: "POST",
    url: '/ajax/upvote/',
    data: JSON.stringify({
      'product_id': ajaxdata
    }),
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      "X-CSRFToken": csrftoken
    },

    success: function(response) {
      var up = response['likes']


      console.log(id)
      $('.target').html(up);



    },
    error: function(rs, e) {
      alert(rs.responseText);
    }
  });
})

<a> <button class=" btn btn-warning btn-dark likes-button " data-id="{{ product.id}}" target="{{product.id}}"> <span class="oi oi-thumb-up"></span> Upvote  <strong class="target" >{{product.votes_total}}</strong></button></a>

Answer 1

Измените свой код на это

$('.likes-button').click(function(){
     var csrftoken = $('[name="csrfmiddlewaretoken"]').val();
    var el= this;
     var ajaxdata = $(this).attr('data-id');
     var id = $(this).attr('target');


          $.ajax({
                   type: "POST",
                   url: '/ajax/upvote/',
                   data: JSON.stringify({'product_id' : ajaxdata}),
                    headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    "X-CSRFToken": csrftoken
                },

                   success: function(response) {
                    var up = response['likes']


                           console.log(id)
                          $(el).find('.target').html(up);



                    },
                    error: function(rs, e) {
                           alert(rs.responseText);
                    }
              });
        })