How to clean up my duplicate jquery code?

Question

I am writing on a system where you can ask and answer questions, looks like this:

Everything is working fine, but the code looks hideous! Lots of duplicate parts that do pretty much the same thing.

This is only for the voteUp-Buttons, the code is pretty much the same for the voteDown-Buttons (except I decrease the score instead of increasing it):

$(document).ready(function(){
    $(".btn-default").click(function(){
        if( $(this).val() == 'voteUp'){

            if( $(this).hasClass("questionButton") ){

            $(this).html( "<span class='glyphicon glyphicon-arrow-up' aria-hidden='true' style='color:orange'></span>" );

            var currentScore = $(this).parent('li').find('> .num').text();
            $(this).parent('li').find('> .num').html(parseInt(currentScore) + 1);

            var currentID = $(this).parent('li').find('> .num').attr('id');

            var buttonType = "questionButton";

            <!-- AJAX script to send the voteScore to the controller and then put it into the DB -->
            $.ajax({ 
                type : 'POST',
                url : '@routes.Application.voteUp()',
                data : {
                    questionID : currentID,
                    score : currentScore,
                    type: buttonType
                    },
                success : function(data){
                    }
            });
            }

            if( $(this).hasClass("answerButton") ){

            $(this).html( "<span class='glyphicon glyphicon-arrow-up' aria-hidden='true' style='color:orange'></span>" );

            var currentScore = $(this).parent('li').find('> .num').text();
            $(this).parent('li').find('> .num').html(parseInt(currentScore) + 1);

            var currentID = $(this).parent('li').find('> .num').attr('id');

            var buttonType = "answerButton";

            <!-- AJAX script to send the voteScore to the controller and then put it into the DB -->
            $.ajax({ 
                type : 'POST',
                url : '@routes.Application.voteUp()',
                data : {
                    questionID : currentID,
                    score : currentScore,
                    type: buttonType
                    },
                success : function(data){
                    }
            });
            }
        }

As I am using a lot of $(this) and its context changes several times, I am not sure how I should approach cleaning my code. Because at the moment it's hard to read and therefore to maintain / extend. I think I could at least outsource the AJAX-POSTs but still the rest would be duplicate.

So how can I re-factor my code and remove the duplicate procedures?

Answer 1

Tried to optimize, suggestions are welcome

$(document).ready(function() {
    $(".btn-default").on('click', function() {
        var $this = $(this),
            $num = $this.parent('li').find('> .num');

        $this.html("<span class='glyphicon glyphicon-arrow-up' aria-hidden='true' style='color:orange'></span>");

        if ($this.val() !== 'voteUp') {
            return;
        }

        if ($this.hasClass("questionButton")) {
            var buttonType = "questionButton";
        }

        // else if ?
        if ($this.hasClass("answerButton")) {
            var buttonType = "answerButton";
        }

        var currentScore = parseInt($num.text()) || 0,
            currentID = $num.attr('id');

        $num.html(currentScore + 1);

        // AJAX script to send the voteScore to the controller and then put it into the DB
        $.ajax({
            type: 'POST',
            url: '@routes.Application.voteUp()',
            data: {
                questionID: currentID,
                score: currentScore,
                type: buttonType
            },
            success: function(data) {}
        });
    });
});