title: JQuery on click Progress Bar
body: <p>I'm trying to get the progress bar animation to run when I click the <code>.trigger</code>. I'm getting the <code>data-percentage</code> value in the logs but the animation isn't running. It works without using <code>$(this).closest()</code> but I cannot figure out why the animation isn't running with my current JS code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".list").on("click", ".trigger", function() {
    var e = $(this).closest(".item");
    $(".progressbar").attr("data-percentage", e.find("#percent").text());
    var t = e.find("#percent").text();
    return (
      $(".progressbar").each(function() {
        var n = e,
          r = t;
        console.log(t),
          parseInt(n.data("percentage"), 10) &lt; 2 &amp;&amp; (r = 2),
          n.children(".bar").animate({
            width: r + "%"
          }, 500);
      }), !1
    );
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.item {
    width: 50px;
    height: 50px;
    border: 1px solid;
  }
  
  .trigger {
    height: 30px;
    width: 30px;
    border: 3px solid blue;
    cursor: pointer;
  }
  
  .progressbar {
    position: relative;
    display: block;
    height: 10px;
    background: #f5f5f5;
  }
  
  .bar.money-green {
    background: #3cd3ad;
  }
  
  .bar {
    position: absolute;
    display: block;
    height: 100%;
    background: #fcb31c;
    width: 0%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="list"&gt;
    &lt;div class="item"&gt;
      &lt;div class="trigger"&gt;
        &lt;p id="percent"&gt;22&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="progressbar" data-percentage=""&gt;
    &lt;div class="money-green bar"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>