I'm trying to teach myself JQuery, and have run into what I assume is a very basic level problem. What I want to end up with is text that changes styles when it's clicked, switching back and forth between two classes. The first half works fine - when I click the span the first time, the new class gets assigned. But nothing happens when I click the second time. I assume this is because the JQuery selector applies the click handlers exactly one time, to the elements that match the selector at that moment. How can I modify my code so that the click handler assigned to a specific class will be applied to all elements that have that class, regardless of when they gain that class?

[Fiddle](https://jsfiddle.net/6x5zgu5e/)

```
<html>
<head>
    <title>My JQuery Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $(".spoiler").click(function() {
                this.className = "revealed";
            });
            $(".revealed").click(function() {
                this.className = "spoiler";
            });
        })

    </script>
    <style type="text/css">
        .spoiler {
            color: black;
            background-color: black;
            cursor:pointer
        }
        .revealed {
            color: red;
            background-color:white;
            cursor:pointer
        }
    </style>
</head>
<body>
    <h1>Caution, spoilers ahead</h1>

    <p>At the end of <em>Soilent Green</em>, the main character reveals in dramatic fashion that "<span class="spoiler">Soilent Green is people!</span>"</p>

</body>
</html>

```