addClass和removeClass

I'm not getting used to write some code in jquery but trying hard.

Making an poll application and I want to show different backgrounds to user when their click one of two button in my page.

div tag

<div id="soruBtnSol" class="bgsol">
    <!-- solbuttonbg -->
    <a class="sorubtn<?=$i?>1" href="javascript:;" rel="<?=$i?>">
        <span id="userCevap" class="sorubtnTxtSol">
                                        <em class="<?php echo $soruCevapId[0]; ?>" style="visibility:visible">
                                            <?=$question[0]?>
                                        </em>
                                    </span>
    </a>
</div>

jquery

$('#soruBtnSol').on('click', function(e){ // FORM GONDER BUTTON EVENT

    var grupid = 'groupId='+$("#groupIdd").attr('class'); 
    var cevapid = 'cevapId='+$("#cevapIdd").attr('class'); 
    var usercevapid = 'userCevap='+$("#userCevap").find('em').attr('class'); 

    console.log(grupid); //example : 45
    console.log(cevapid);
    console.log(usercevapid);

    if(cevapid != usercevapid) { 

            $( "#soruBtnSol" ).removeClass( "bgsol" ).addClass( "fail" );
        } 

    if(cevapid == usercevapid) { 

            $( "#soruBtnSol" ).removeClass( "bgsol" ).addClass( "success" );
            currentskor = 5; 
    }

});

EDIT : CSS ADDED

#soruBtnSol {
    position: absolute;
    top: 50%;
    left: 80px;
    width: 192px;
    height: 75px;
    margin-left: -75px;
    z-index: 3;
    float: left;
}

.bgsol {
    background: url("../img/btn-left.png") no-repeat;

}

.fail {
    position: absolute;
    background: url("../img/fail.png") no-repeat;
    z-index: 4;
}

.success {
    position: absolute;
    background: url("../img/success.png") no-repeat;
    z-index: 4;
}

I want to change <div id="soruBtnSol" class="bgsol"> into <div id="soruBtnSol" class="fail"> if users gave wrong answer. if not, class will be success.

I do might have some issues in if() condition in jquery.

Any suggestions?

Try this

$('#soruBtnSol').on('click', function(e){ // FORM GONDER BUTTON EVENT

    var grupid = 'groupId='+$("#groupIdd").prop('class'); 
    var cevapid = 'cevapId='+$("#cevapIdd").prop('class'); 
    var usercevapid = 'userCevap='+$("#userCevap").find('em').attr('class'); 

    console.log(grupid); //example : 45
    console.log(cevapid);
    console.log(usercevapid);

    if(cevapid != usercevapid) { 

            $(this).removeClass("bgsol").addClass("fail");
        } 

    if(cevapid == usercevapid) { 

            $(this).removeClass("bgsol").addClass("success");
            currentskor = 5; 
    }

});