Goal: Reddit style voting system

Two voting buttons (up/down), with the button that i have already clicked on a post indicates this e.g. by different background color. This should happen on page load based on database value and dynamically when I click it. If I change a vote from up to down and vice-versa, both buttons should change.

Background:

As a base, I am using this plugin: https://janosgyerik.github.io/upvotejs . It is basically running, and I managed to exchange the use of the .svg to show the arrows with text so that I can easily change what symbol to use for the buttons.

Problem:

With my limited knowledge, I am struggling for hours now to get the buttons to indicate the vote status on page load and to dynamically change them as mentioned above.

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

I want to add the class "voted-toggle" to the span for the upvote or the downvote accordingly on page load and on click. The "data-voted" attribute has value 1 for upvote, value -1 for downvote and 0 for no vote. The "data-id" attribute is the unique post id.

How can I achieve to add / remove the "voted-toggle" class to indicate which way the user has voted on page load and on click?