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.not-started").on("click", function () {
    $(this).removeClass("not-started").addClass("started").html("click to hide");
});

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