Objetivo: sistema de votación estilo Reddit
Dos botones de votación (arriba/abajo), con el botón en el que ya hice clic en una publicación, lo indica, por ejemplo, con un color de fondo diferente. Esto debería suceder en la carga de la página según el valor de la base de datos y dinámicamente cuando hago clic en ella. Si cambio un voto de arriba a abajo y viceversa, ambos botones deberían cambiar.
Fondo:
Como base, estoy usando este complemento: https://janosgyerik.github.io/upvotejs . Básicamente se está ejecutando, y logré intercambiar el uso de .svg para mostrar las flechas con texto para que pueda cambiar fácilmente qué símbolo usar para los botones.
Problema:
Con mi conocimiento limitado, estoy luchando durante horas para obtener los botones que indican el estado de la votación en la carga de la página y para cambiarlos dinámicamente como se mencionó anteriormente.
<div id="topic_{{$deal->id}}" class="topic pb-1 pt-1 pl-2 pr-2 upvote d-inline-flex btn vote-button border" data-id="{{$deal->id}}" data-votes="{{$deal->votes}}" > <a class="upvote vote" data-value="1" data-id="{{$deal->id}}"> <span class="material-icons" style='font-size:24px;color:red' data-voted="{{$deal->upvoted}}" data-id="{{$deal->id}}">add</span> </a> <div class="count ml-3 mr-3" style='font-size:20px;color:red'>{{$deal->votes}}</div> <a class="downvote vote" data-value="-1" data-id="{{$deal->id}}"> <span class="material-icons" style='font-size:24px;' data-voted="{{$deal->upvoted}}" data-id="{{$deal->id}}">remove</span> </a> <a class="star" style="display: none"></a> </div>Quiero agregar la clase "voted-toggle" al lapso para el voto a favor o en contra en consecuencia en la carga de la página y al hacer clic. El atributo "datos votados" tiene el valor 1 para votar a favor, el valor -1 para votar a favor y 0 para no votar. El atributo "id de datos" es la identificación única de la publicación.
¿Cómo puedo lograr agregar/eliminar la clase "voted-toggle" para indicar de qué manera el usuario votó en la carga de la página y al hacer clic?