AJAX call is triggered only in the first link and not in any other links inside a for loop
<p>I have an issue in implementing AJAX call for all the links inside for loop in Python Flask application.</p>

<p>Only the first link triggers AJAX call and no other links triggers AJAX call.</p>

<p>Below is the code of the respective .html and .js file I have implemented.</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>What should I do to fix this issue?</p>

<p>Change the ids into classes, ids must be unique</p>

<pre><code>{% for article in articles %}
  {% if article._id in likes %}
    &lt;button data-toggle="tooltip" title="Unlike" class="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" class="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>$(".like-button").on("click", function(e)    {
e.preventDefault();
var article = $(this).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>

javascript jquery python ajax