hasClass jQuery always gives "false"

Question

Updated DEMO Link

I have 2 divs, on click of each div I'am adding class "mission-active" respectively: once first div is clicked class is being added, then again I'am clicking the other div. I am searching the parent div and removing class and adding to current clicked element (just like Radio Button).

Issue : Whenever I try to check if($(this).parent('').hasClass), it always returns false.

HTML : 
<div class="full-page-width">


<div class="doctor-wrap clrfix">
            <div class="doctor-left">
                <div class="doc-img">
                    <img src="http://i.istockimg.com/image-zoom/84647033/3/380/339/stock-photo-84647033-young-woman-lying-in-the-grass.jpg" alt="doctor select"></div>
                <span class="doctor-txt">Tự chọn  bác sĩ yêu thích</span>
            </div>
            <div class="doctor-right">
                <div class="doc-img">
                    <img src="http://i.istockimg.com/image-zoom/84647033/3/380/339/stock-photo-84647033-young-woman-lying-in-the-grass.jpg" alt="doctor select"></div>
                <span class="doctor-txt">Giúp chọn <br> bác sĩ phù hợp nhất</span>
            </div>
        </div>
    </div>



Image Courtsey : http://www.istockphoto.com/


JS : 

        /*--- Doctor List Filter Starts ---*/
        $('#search-criteria').keyup(function () {
            var searchStr = $(this).val().toUpperCase();

            $(".doctor-profile").each(function () {
                var isMatch = $(this).text().toUpperCase().indexOf(searchStr) > -1;
                $(this)[isMatch ? "show" : "hide"]();

            });
        });
        /*--- Doctor List Filter Ends ---*/


        /*--- Mission Page Starts ---*/

        console.log('hello');

        // Hide all divs on load 
        $('.select-doctor').hide();


        var step1, step2, step2prev, step2next, step3, step4, step5;

        step1       = ".btn-1 img, #edit-submit--2";
        step2prev   = ".doctor-left-btn img";
        step2next   = ".doctor-right-btn img";
        chooseDoctor= ".doctor-left .doc-img";
        randomDoctor= ".doctor-right .doc-img";



        $(step1).on('click', function(){
            $('#fw_content').find('.pane-vietnam-enfa-plus-vietnam-doctor-list-form, .btn-1').fadeOut( "fast" );
            $('#fw_content').find('.select-doctor').fadeIn( "fast" );
        });

        $(step2prev).on('click', function(){
            $('#fw_content').find('.pane-vietnam-enfa-plus-vietnam-doctor-list-form, .btn-1').fadeIn( "fast" );
            $('#fw_content').find('.select-doctor').fadeOut( "fast" );
        });

        $(step2next).on('click', function(){
            $('#fw_content').find('.doctor-wrap, .doctor-btn-wrap').fadeOut( "fast" );
            $('#fw_content').find('#flexslider-1, .pane-vietnam-enfa-plus-vietnam-enfa-plus-form').fadeIn( "fast" );            
        });

        $(chooseDoctor).on('click', function(){
            if($(this).parent('.doctor-wrap .doctor-left .doc-img').hasClass('mission-active')){
                $(this).removeClass('mission-active');  
                alert('true 1');
            }
            else {
                $(this).addClass('mission-active'); 
            }
            /* else if($(this).parent('.doctor-wrap').find('.doctor-right .doc-img').hasClass('mission-active')){
                alert('true 1.1 right');
            } */
        })
        $(randomDoctor).on('click', function(){

            if($(this).parent('.doctor-wrap').find('.doctor-left .doc-img').hasClass('mission-active')){
                $(this).addClass('mission-active');
                alert('RIght Click true 1');
            }
            else if($(this).parent('.doctor-wrap').find('.doctor-right .doc-img').hasClass('mission-active')){
                alert('RIght Click  true 1.1 right');
            }
        })

        /*--- Mission Page Ends ---*/

Answer 1

The problem is .parent(".doctor-wrap")

You must do .parents(".doctor-wrap")

But, you can do like this :

https://jsfiddle.net/bcnppybm/2/

$('.doc-img').click(function() {
    $('.doc-img').each(function(){$(this).removeClass('mission-active');});
    if (!$(this).hasClass('mission-active')) {
    $(this).addClass('mission-active');
  }
})