Insert HTML inside if statement

I have list where I am inserting the image through jQuery.

$("#icon1").html('<img src="images/summary_icon_u.png"  />');

This is my list

<ul>
    <li data-menuanchor="firstPage" class="one">
        <a href="#firstPage" class="cmIcon" id="icon1"></a>
    </li>
    <li data-menuanchor="secondPage" class="two">
        <a href="#secondPage" class="cmIcon" id="icon2"></a>
    </li>
</ul>

I have few navigation list like this. When each list is clicked, an 'active' class is called on.

My need is when I click the list, if the list has class 'active' then it should append a html or else it should append another html.

This is my code below I tried but not working.

$(document).ready(function() {
    $('li.one').click(function() {
        if ($(this).hasClass('active')) {
            $("#icon1").html('<img src="images/summary_icon_u.png" />');
        } else {
            $("#icon1").html('<img src="images/summary_icon_c.png" />');
        }
    });
    $('li.two').click(function() {
        if ($(this).hasClass('active')) {
            $("#icon2").html('<img src="images/audi_risk_u.png" />');
        } else {
            $("#icon2").html('<img src="images/audi_risk_c.png" />');
        }
    });
});

Thanks in advance.