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

$(document).on("click", ".card.not-started", function () {
    $(this).removeClass("not-started").addClass("started").html("click to hide");
});

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