How to make jquery counter go up and down with multiple buttons?

Question

I am using jquery and an AJAX call to send data to my django view when a user clicks on a button (there are multiple buttons on the page). Every time the user clicks on a button (which corresponds to a specific entry [word] in the table), the count must go up with one and the relevant word be stored. I then realised that the user can click the same word more than once, which will mess up the data. So I changed it so that a particular button can only be clicked once.

However, I then realised that it would be good to give to user the option of undoing a click, for if they accidentally clicked a button. So now I want the counter to go up by one if clicked the first time and the relevant word stored, and down by one (and the relevant word deleted) if clicked again. I found a few ways of doing this online, but it's only for if there is only one button on the page, but I have multiple. I'm struggling to figure out how to do it for multiple buttons.

This seems to work quite well if there is only one button: https://stackoverflow.com/a/38908529/13290801

Here is my jquery trying to implement this:

$(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 snippet:

<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>

And here is a demo of it without the AJAX part - it just goes from zero to one and back. How can I implement it so that it correctly handles multiple buttons?

Demo: https://jsfiddle.net/2mjwcg81/1/

score 1 · Accepted Answer · answered Jul 14 '20 at 08:55

I managed to solve this as follows:

$(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);
 }
}
})
});

How to make jquery counter go up and down with multiple buttons?

1 Answers1