Using Ajax change state of a clicked button

Question

I am building a page in a Django project which has multiple comments each of which can be liked/unliked with a button next to the text. So the page has multiple like/unlike buttons.

The buttons display fine when the page is loaded, and I can use Ajax to send data to Django and update my database which works fine, and I can return data back to the Ajax success function.

What I can't work out is - how can I update the status of the actual button which was clicked. I am able to update the status of all of the buttons together on the page as per the code below (pointless I know!), but can't see how I reference the clicked button. I've tried passing and then returning the button id which I can display in an alert, but not sure if this is what I should be using or where I go from here?

HTML Template

{% for comments in comments_page %}
    <p>
        <b>{{ comments.created_at }} ({{ comments.user_type }})</b>
        {% if comments.comment_liked is False %}
            <button class="comment btn btn-primary btn-xs"
                    id={{ forloop.counter0 }}
                    data-surveyid="{{ comments.id }}"
                    data-commentliked="True"
                    type="button">
                <span class="glyphicon glyphicon-star-empty"></span>
            </button>
        {% else %}
            <button class="comment btn btn-success btn-xs"
                    id={{ forloop.counter0 }}
                    data-surveyid="{{ comments.id }}"
                    data-commentliked="False"
                    type="button">
            <span class="glyphicon glyphicon-star"></span>
            </button>
        {% endif %}
    </p>
    <p>{{ comments.comments }}</p>
    <br>


{% endfor %}

Javascript / Ajax

{% block javascript %}

    <script type="text/javascript">
        $(function() {
           $('.comment').click(function() {

               var surveyid, commentliked, buttonid;
               surveyid = $(this).attr('data-surveyid');
               commentliked = $(this).attr('data-commentliked');
               buttonid = $(this).attr('id');

             $.ajax({
                 url: '/evaluations/validate_username/',
                 data: {
                    'surveyid': surveyid,
                     'commentliked': commentliked,
                     'buttonid': buttonid
                    },
                 dataType: 'json',
                 type: 'get',

                 success: function (data) {
                    alert(data.buttonid);
                    $(".comment").removeClass('comment btn btn-primary btn-xs').addClass('comment btn btn-success btn-xs');
                 }

             });

           });
        });
    </script>
{% endblock %}

Answer 1

Just target the clicked button in your success function:

{% block javascript %}
    <script type="text/javascript">
        $(function() {
           $('.comment').click(function() {

               // the button instance that was clicked
               var clickedBtn = $(this);

               var surveyid, commentliked, buttonid;
               // also, you can use data-* to get the data attributes
               // surveyid = clickedBtn.attr('data-surveyid');
               // commentliked = clickedBtn.attr('data-commentliked');
               surveyid = clickedBtn.data('surveyid');
               commentliked = clickedBtn.data('commentliked');
               buttonid = clickedBtn.attr('id');

             $.ajax({
                 url: '/evaluations/validate_username/',
                 data: {
                     'surveyid': surveyid,
                     'commentliked': commentliked,
                     'buttonid': buttonid
                    },
                 dataType: 'json',
                 type: 'get',

                 success: function (data) {
                    alert(data.buttonid);
                    clickedBtn.removeClass('comment btn btn-primary btn-xs')
                    .addClass('comment btn btn-success btn-xs');
                 }
             });
           });
        });
    </script>
{% endblock %}