If statement inside click function doesn't work as expected after the first click
<p>check the code below</p>

<p>When I click on the <code>span</code> <strong>for the first time</strong>, it triggers <code>markStarted</code> function and <code>fa</code> icon and <code>data-aevent</code> are updated successfully. And I get <code>started</code> in dev console.</p>

<p>When I click it again <strong>(without page reload)</strong> <code>markFinished</code> is not triggered. And I still get 'started' in console.</p>

<p>What am I doing wrong?</p>

<pre><code>&lt;span class="label label-info check " data-id="4" data-aevent="finish"&gt;&lt;i class="fa fa-check fa-fw"&gt;&lt;/i&gt;&lt;/span&gt;
</code></pre>

<p>markStarted, markFinished </p>

<pre><code>var markStarted = function(task){
  task.find('i').removeClass('fa-play').addClass('fa-check');
  var nextstate = "finish";
  task.data("data-aevent", nextstate);
  console.log("started");
}
var markFinished = function(task){
  task.fadeOut();
  console.log("finished");
}
</code></pre>

<p>on click function</p>

<pre><code>$(function() {
    $(".check").on("click", function() {
      var task = $(this);
      var task_id = task.data("id")
      var aevent = task.data("aevent");

      if (aevent == "start"){
        markStarted(task);
      }else {
        markFinished(task);
      }

    });
  });
</code></pre>