How to select the correct comment on a page using jquery?

Question

JavaScript

Hello.

I do ajax to the likes button on the comments. Can't figure out how to select the right element to interact with.

There is a For loop that displays comments on the page:

{% for com in com_view %}

    <div class="comment">
        <p class="comments_nickname">            
            <a href="{% url 'profile' com.user_link.id  %}"><span class="profile_link_comment">{{ com.user_link }}</span></a> | {{ com.comdata }}
        </p>
        <p class="comments_social_counter"><a id="up_com_video_like" class="comments_social_thumb" href="{% url "upvideocomlike" com.id %}"></a><span id="com_like_number">{{ com.get_plus }}</span></p>
        <p class="comments_main_text">{{ com.comtext }}</p>
        <hr>
    </div>

{% endfor %}

I am making an ajax request with jquery to a comment.

<script type="text/javascript">

    $('#up_com_video_like').click(function(e){
        e.preventDefault();

        $.ajax({
            url: '{% url "upvideocomlike" com.id %}',
            success: function(data){
                $('#com_like_number').html(data.count_like)                
            }
        });
    });

</script>

And it turns out that if there are several comments, they will have the same ID. Therefore, either the code will not work, or all elements will be selected at once. Also, I don't know how to pass the pk of the desired comment to success.

Answer 1

And it turns out that if there are several comments, they will have the same ID.

Use classes.