title: fadeOut() function working for only first item
body: <p>I've been playing with jQuery lately and I decided to put up this simple to-do list app. The problem with my code is, when I check an item that is not the first item, the <code>fadeOut()</code> function does not work. However, after checking the first item, it starts working for all other items. NB: the first item was built-in and not added dynamically compared to the rest. Also, after checking out all items, if I add a new item, it does not work!</p>
  
  <pre><code>var main = function() {
  
      var addComment = function() {
  
          var $card;
          var $cardBody;
          var $formCheck;
          var $formCheckLabel;
  
          if($("#comment").val() !== "") {
  
              $card = $("&lt;div&gt;").addClass("card bg-success text-white mt-3");
              $cardBody = $("&lt;div&gt;").addClass("card-body");
              $formCheck = $("&lt;div&gt;").addClass("form-check");
              $formCheckLabel = $("&lt;label&gt;").addClass("form-check-label");
              $($formCheckLabel).text($("#comment").val());
  
              $($formCheckLabel).append('&lt;input type = "checkbox" class="form-check-input shift"&gt;');
  
              $($formCheck).append($formCheckLabel);
              $($cardBody).append($formCheck);
              $($card).append($cardBody);
  
              $(".todos").append($card);
              $("#comment").val("");
  
          } 
  
  
      };
  
      var remove = function() {
          $(".card").on("click", function(event) {
              $(this).fadeOut();
          });
      }
  
      $("#btn").on("click", function(event) {
          addComment();
      });
  
      $("#comment").on("keypress", function (event) {
          if (event.keyCode === 13) {
              addComment();
          }
      });
  
      $(".card").on("click", function(event) {
          remove();
      });
  };
  
  $(document).ready(main);
  </code></pre>