Javascript 如何使用多个按钮使jquery计数器上下移动？

当用户单击按钮（页面上有多个按钮）时，我使用jquery和AJAX调用将数据发送到django视图。每次用户点击一个按钮（对应于表中的一个特定条目[word]）时，计数必须增加一个，并存储相关的单词。然后我意识到，用户可以多次单击同一个单词，这会弄乱数据。所以我改变了它，一个特定的按钮只能点击一次

然而，我后来意识到，如果用户不小心点击了一个按钮，最好给用户取消点击的选项。因此，现在我希望计数器在第一次单击并存储相关单词时上升1，在再次单击时下降1（并删除相关单词）。我在网上找到了一些方法，但这只适用于页面上只有一个按钮的情况，但我有多个按钮。我正在努力找出如何对多个按钮执行此操作

如果只有一个按钮，这似乎工作得很好：

下面是我的jquery试图实现的：

$(document).ready(function() {
  var known_words = 0;
  var clicked_words = [];
  var state = true;
  $(".word_known").click(function() {
    if (state) {
    known_words++;
    var reference = this;
    var songpk = $(this).data('songpk');
    var userpk = $(this).data('userpk');

    clicked_words.push($(this).data('word'));
    $.ajax({
      async: false,
      url: "/videos/songs/vocab/known/"+songpk+"/"+userpk+"/",
      data: {'known_words': known_words, 'clicked_words': clicked_words},
      success: function(data) {
    $(reference).removeClass("btn-warning");
    $(reference).addClass("btn-success");
    $(reference).text("Known");
    test(data);
    state = false;
  },
      failure: function(data) {
        alert("There is an error!")
      },
      contentType: "application/x-www-form-urlencoded; charset=utf-8",
      })
   function test(data){
     console.log(data);
   }
}  else {
  known_words--;
  var reference = this;
  var songpk = $(this).data('songpk');
  var userpk = $(this).data('userpk');

  clicked_words.pop($(this).data('word'));
  $.ajax({
    async: false,
    url: "/videos/songs/vocab/known/"+songpk+"/"+userpk+"/",
    data: {'known_words': known_words, 'clicked_words': clicked_words},
    success: function(data) {
  $(reference).removeClass("btn-success");
  $(reference).addClass("btn-known");
  $(reference).text("Да");
  test(data);
  state = true;
},
    failure: function(data) {
      alert("There is an error!")
    },
    contentType: "application/x-www-form-urlencoded; charset=utf-8",
    })
 function test(data){
   console.log(data);
 }
}
})
});

Html代码片段：

<td class='col-1 d-flex align-middle'>
            {% if item.0 in user_flash %}
              <button type="button" class="btn btn-success btn-sm" >Known</button>
            {% elif item.0 in known_words %}
            <button type="button" class="btn btn-success btn-sm" >Known</button>
            {% else %}
            <a href="javascript:" class="word_known btn btn-warning btn-sm" data-word="{{item.0}}" data-songpk="{{song_pk}}" data-userpk="{{user_pk}}">Да</a>
            {% endif %}
         </td>

{%if用户_flash%中的项.0}
已知的
{%elif item.0在已知单词%}
已知的
{%else%}
{%endif%}

这里是一个没有AJAX部分的演示，它只是从零到一再回到零。如何实现它以使其正确处理多个按钮

---

演示：

我设法解决了这个问题，如下所示：

$(document).ready(function() {
  var known_words = 0;
  var clicked_words = [];
  $(".word_known").click(function() {
    var reference = this;
    var songpk = $(this).data('songpk');
    var userpk = $(this).data('userpk');
    $(this).toggleClass('increment');
    if ($(this).hasClass('increment')) {
    known_words++;
    clicked_words.push($(this).data('word'));
    $.ajax({
      async: false,
      url: "/videos/songs/vocab/known/"+songpk+"/"+userpk+"/",
      data: {'known_words': known_words, 'clicked_words': clicked_words},
      success: function(data) {
    $(reference).removeClass("btn-warning");
    $(reference).addClass("btn-success");
    $(reference).text("Known");
    test(data);
  },
      failure: function(data) {
        alert("There is an error!")
      },
      contentType: "application/x-www-form-urlencoded; charset=utf-8",
      })
   function test(data){
     console.log(data);
   }}
  else {
  known_words--;
  clicked_words.pop($(this).data('word'));
  $.ajax({
    async: false,
    url: "/videos/songs/vocab/known/"+songpk+"/"+userpk+"/",
    data: {'known_words': known_words, 'clicked_words': clicked_words},
    success: function(data) {
  $(reference).removeClass("btn-success");
  $(reference).addClass("btn-warning");
  $(reference).text("Да");
  test(data);
},
    failure: function(data) {
      alert("There is an error!")
    },
    contentType: "application/x-www-form-urlencoded; charset=utf-8",
    })
 function test(data){
   console.log(data);
 }
}
})
});