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

var parent = $(".card").parent();
parent.on("click", ".not-started", function () {
    $(this).toggleClass("not-started started").html("click to hide");
});

parent.on("click", ".started", function(){
    $(this).fadeOut();
});