I have four circles each with a unique background color and a span inside which is white.
When the user clicks on each circle I want that circle to switch background and span color, or in other words, I want the background color to be set for span, and background to become white.

My code does this correctly, but when I click on any other circle I want that circle to have white background and colored span while the previous circle is back to default (white span, colored background).

The jQuery:

```
$("#fifthcircleholder li").click(function () {
    var currentspan = $(this).find("span");
    var allspans = $("#fifthcircleholder li").find("span");

    $(this).find("span").css({
        color: $(this).css("background-color")
    });
    $(allspans).not(currentspan).css({
        "color": "#fff"
    });
    $(this).css({
        "background-color": "#ffffff"
    })

    var found = $("#fifthcircleholder li");
    if (found.css("background-color") == "#fff") {
        $(this).find("span").css({
            "background-color": $(this).css("color")
        });
    }

});

```

The HTML:

```
<ul id="fifthcircleholder">
    <li id="fifthc1"><span>blah blah</span></li>
    <li id="fifthc2"><span>blah</span></li>
    <li id="fifthc3"><span>blah</span></li>
    <li id="fifthc4"><span>blah</span></li>
</ul>

```