Как сделать добавление/удаление в счетчике п клику с помощью js
 

Доброго дня профессионалам кода!!!
Пытаюсь организовать лайки в статьях. На серверной стороне все работает как нужно, осталось доделать на клиенте... Сам немогу разобраться...
Вот такой код:
есть дивы со счетчиками и разными классами, внутри переменная которая показыает значение лайков с сервера:

<div class ='on'> <?= $count; ?> </div>
<div class ='off'> <?= $count; ?> </div>
<div class ='on'> <?= $count; ?> </div>
<div class ='off'> <?= $count; ?> </div>

Как мне сделать так, чтоб с помощью js в классах 'off' добавлялась один раз еденичка, а по следующему клику удалялась. А в классах 'on', наоборот: удалялась, а последующему клику добавлялась.

Это тоже сервер должен делать. Он же знает, сколько там в $count. Он и менять должен. При каждом нажатии на див, должно быть обращение к серверу. Иначе он опять, следующий раз выдаст старый $count.

Сервер это уже делает... По каждому клику идет обращение к серверу...но значение выдает после перезагрузки... не в момент клика.... Пытался через ajax cделать загрузку значения, но оно выдает во всех дивах значение... Сейчас возникла идея организовать это без сервера, со знанием текущего значения $count...
Надею нормально описал.. Спросите если не поняли...

Так в примере у вас и есть одно значение во всех дивах.
Так все равно серверу надо сообщить, что значение изменилось, что бы следующий раз он выдал правильное

1. $count - для каждого дива разная... после клика происходит добавление/удаление записи в БД кокретного дива, от этого идет подсчет $count
2. Сервер реагирует на каждый клик: один раз добавление(если записи нет), второй раз удаление... если класс on - удаление записи, off - добавление...
Если организовать добавление/удаление еденички просто функцией js, значение на серевере будет совпадать со значением на клиенте...
Пока в этом направлении думаю...

Раз после клика идет обращение к серверу, там и меняй.
Если обращение ajax то значит надо заводить переменные, менять их и перезаписывать в div textContent.
Если обращение со сменой страницы, то сервер сам должен подставить нужное значение при каждой выдаче страницы.

Да, как то так... может подскажите как написать это правильно...

$('.off, .on').click(function(){
$count = <?= $count; ?>; // как то нужно указать что значение именно этого дива
// а потом добавлять/удалять еденичку. Если класс on, то припервом клике удалять при повторном добавлять, если off то наоборот и все это выводить в значении html дива
});

Если все дивы разные и переменные все разные, то придется писать разные обработчики. Или внутри одного обработчика кучей if-ов проверять какой именно div и какой именно счетчик.

Я все таки не понимаю всей задачи.
Если просто 4 дива и один счетчик, то решение одно.
Если 4 дива и 4 счетчика, то другое....

Дивов может быть больше, я вывожу и в цыкле и там же делаю подсчет на сервере.... тут их условно 4... счетчик для каждого..

вот мой запрос ajax, когда я кликаю по кнопке добавить/удалить лайк:

$('.off, .on').click(function(){

$(this).toggleClass('on'); //это добавление/удаление стиля при клике

$user_id = localStorage.getItem('user_id'); // id того кто лайкнул
$user_name = localStorage.getItem('user_name');  // ямя того кто лайкнул
$forum_id =  this.value; // id статьи
$author = this.name; //имя автора статьи
$.ajax({
    method: 'post',
    url: '/like.php',   //тут я добавляю в БД, если нет записи и удаляю если есть...
    data: {
        user_id: $user_id,
        user_name: $user_name,
        forum_id: $forum_id,
        author: $author,
    },
    dataType: 'html',
    success: function(data){

   }
});

});