Not able to interact with class created by DOM

HTML

<div class="card started">click to hide</div>
<div class="card not-started">click to start</div>

CSS

.card{padding:20px; display:block; margin:10px 0;}
.started{background:red;}
.not-started{background:green;}

JavaScript

$(".card").on("click", function () {
    var el = $(this);
    if (el.hasClass("not-started")){
        el.toggleClass("not-started started").html("click to hide");
    } else {
        el.fadeOut();
    }
});