jquery to change background works only one time

Question

I have a span and I want to change color on click but it works only one time.

<span id="mainData" class="form-control" style="background-color:white">Test Color</span>

and jquery

$(function () {
            $("#mainData").on("click", function () {
                if ($("#mainData").css("background-color", "white")) {
                    $("#mainData").css("background-color", "green")
                    $("#mainData").css("color", "white")
                }
                else {
                    $("#mainData").css("background-color", "white")
                };
            });
        });