Not all the links are triggering AJAX call, only the first one does in Python Flask Application
<p>I have strange issue with the AJAX that I have implemented for the 'like' and 'unlike' buttons in the python flask application. Below is the code for the .html and .js files.</p>

<p>.html</p>

<pre><code>{% for article in articles %}
  {% if article._id in likes %}
    &lt;button data-toggle="tooltip" title="Unlike" id="unlike-button" value="{{article._id}}"&gt;&lt;span id="user-like-recommend" class="glyphicon glyphicon-heart" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;
  {% else %}
    &lt;button data-toggle="tooltip" title="Like" id="like-button" value="{{article._id}}"&gt;&lt;span id="user-like-recommend" class="glyphicon glyphicon-heart-empty" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;
  {% endif %}
{% endfor %}
</code></pre>

<p>.js</p>

<pre><code>document.getElementById("like-button").addEventListener("click", function(e)    {
e.preventDefault();
var article = $('#like-button').val();
var data = {"article": article};
console.log(data);
if(data){
  $.ajax({
    type: 'POST',
    contentType: 'application/json',
    url: '/article_liked',
    dataType : 'json',
    data : JSON.stringify(data),
    success: function (response) {
      success("Article was successfully liked.");
    }
</code></pre>

<p>So, only the first active article can have an AJAX call.</p>

<p>Well, there are more than one html elements with the same id, so all events will fire only for first of them. </p>

<p>Just use classes in html: </p>

<pre><code>{% for article in articles %}
    {% if article._id in likes %}
        &lt;button class="unlike-button" ...&gt;&lt;/button&gt;
    {% else %}
        &lt;button class="like-button" ...&gt;&lt;/button&gt;
    {% endif %}
{% endfor %}
</code></pre>

<p>And use jquery selector in your JavaScript:</p>

<pre><code>$('.like-button').on('click', function(){
    var data = { "article": $(this).val()};
    ... your ajax code
}
</code></pre>

javascript jquery python ajax