I have a problem with the following code. I tried changing many things (symbols, classes, imgs in the code) but this is killing me and I have no idea how to fix it. Sorry it's so specific, when solved I'll change the title to something more useful.

I have two images. My jquery has to calculate the day and show one image or the other depending on that (using a class with display:none). My month has 24 days (it's a xmas thing). This is what I have so far:

<script type="text/javascript">
    $(document).ready(function(){
        var currentTime = new Date()    
        var day = currentTime.getDate(); 
        if (day > 24){ 
        day = 1;    
        }
            $(".calDate").each(function(){
                var curDate = $(this).attr("date");
                    if (curDate < day){
                        $(this).addClass("xMasPast");
                    }
                    else if(curDate==day){                                               
                        $(this).addClass("xMasActive");
                    }
                    else {
                        $(this).addClass("xMasInactive");
                    }


            });

            $(".calDate2").each(function(){
                var curDate = $(this).attr("date");
                    if (curDate > day){
                        $(this).addClass("xMasInactive");
                    }
                    else if(curDate==day){                                               
                        $(this).addClass("xMasActive");
                    }
                    else {
                        $(this).addClass("xMasActive");
                    }


            });
    });
</script>

But it's showing all the images. What am I missing? (any ideas on making the code simpler are more than welcomed). Thanks for your help!

Update: simplified HTML

<div><img src="day21.png" which="21"/></a></div>
<img id="bola21" class="calDate2" src="day21.png"/>