Increase/decrease numeric value of a span and removeClass of a link if either id up/down clicked in jQuery

Question

I am using jquery.upvote.js to display a voting system on my posts.

I am first checking if the user is not logged in, if he is not, and he votes on a post, I wanna display him an alert which I've already achieved.

But I would also like to remove the class upvote-on and downvote-on depending on which button the user has clicked, and I would like to reset the vote .count to it's original state. If the post has 2 points, and the user clicked upvote , the number would go up to 3 automatically, I would like to bring it back to 2 by decreasing its value. And if he clicked downvote the number would automatically go down by, here I'd like to increase it by 1 and bring it back to its original state.

I would also like to do this only once . Because from what I've seen, it would keep increasing/decreasing the number as long as the user keeps clicking the voting buttons (while logged out).

This is the HTML markup

<div class="upvote topic" data-post="{{ $post->id }}">

    <a id="up" class="upvote vote {{ $post->votes && $post->votes->contains('user_id', Auth::id()) ? ($post->votes->where('user_id', Auth::id())->first()->value > 0 ? 'upvote-on' : null) : null}}" data-value="1" data-post-id="{{ $post->id }}"></a>

    <span class="count">{{ $post->votes->sum('value') }}</span>

    <a id="down" class="downvote vote {{ $post->votes && $post->votes->contains('user_id', Auth::id()) ? ($post->votes->where('user_id', Auth::id())->first()->value < 0 ? 'downvote-on' : null) : null}}" data-value="-1" data-post-id="{{ $post->id }}"></a>
</div>

I've managed to removeClass from both upvote and downvote links but I wasn't able to increase/decrease the value of the span and I didn't do any checking, I just initialized it on $('.vote').on('click') so it didn't matter if it's upvote or downvote, the class upvote-on and downvote-on both got removed whenever a vote was performed.

if(data.status == false) {
    sweetAlert("Oops...", "You are not logged in!", "error");

    $('a.upvote').removeClass('upvote-on');

    $('a.downvote').removeClass('downvote-on');
}

Then I tried to take it further by checking if whether id #up or #down was clicked, but that didn't yield any results. Classes were not removed and the numeric value turned to NaN

$.get( "http://localhost/r2/public/data/islogged", function(data)
{
    data.status == false ? console.log('not logged in') : console.log('logged in');

    $('.vote').on('click', function (e) {
        e.preventDefault();
        var $button = $(this);
        var postId = $button.data('post-id');
        var value = $button.data('value');

        if(data.status == false) {
            sweetAlert("Oops...", "You are not logged in!", "error");

            $("#up").click(function() {
                $('a.upvote').removeClass('upvote-on');
                $(".count").text(Number($(".count").text()) - 1);
            });
            $("#down").click(function() {
                $('a.downvote').removeClass('downvote-on');
                $(".count").text(Number($(".count").text()) + 1);
            });

        } else {
            $.post('http://localhost/r2/public/votes', {postId:postId, value:value}, function(data) {
                // success here
            }).fail(function() {
                sweetAlert("Oops...", "Something went wrong...", "error");
            }, 'json');
        }
    });

How do I go about doing this? Is there a better way?

UPDATE

I changed the code a little bit, but it's still not working. Class doesn't even get removed. As if $('.upvote .vote').on('click') doesn't exist.

$('.upvote .vote').on('click', function (e) {
    e.preventDefault();
    $('a.upvote').removeClass('upvote-on');
    $('span.count').val(parseInt($('span.count').val()) - 1);
});

$('.downvote .vote').on('click', function (e) {
    e.preventDefault();
    $('a.downvote').removeClass('downvote-on');
    $(".count").text(Number($(".count").text()) + 1);
});

Answer 1

    $("#up").click(function() {
            $('a.upvote').removeClass('upvote-on');
            $(".count").text(Number($(".count").text()) - 1);
        });
        $("#down").click(function() {
            $('a.downvote').removeClass('downvote-on');
            $(".count").text(Number($(".count").text()) + 1);
        });

this code not reachable when user logged in because it inside if(data.status == false)

Try parseInt($(".count").text()) instead of Number()