title: Updating variable after click event
body: <p>On click of and <code>li</code>, I want to get the <code>data-currency</code> and assign it to a <code>var</code>. To do this, I have the following:</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>$(function(){
  
    var $currency = "€";
  
    $('.pricingTable__dropdown-li').click(function(){
      var data_currency = $(this).attr('data-currency');
      if(data_currency == "pounds"){
        $currency = "£";
      } else if (data_currency == "dollars") {
        $currency = "$";
      } else{
        $currency = "€";
      }
    });
  
    console.log($currency);
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;ul class="pricingTable__dropdown-ul"&gt;
    &lt;li data-currency="euros" class="pricingTable__dropdown-li"&gt;€ Euro&lt;/li&gt;
    &lt;li data-currency="pounds" class="pricingTable__dropdown-li"&gt;£ Pound&lt;/li&gt;
    &lt;li data-currency="dollars" class="pricingTable__dropdown-li"&gt;$ Dollar&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Upon refreshing my page and checking console, I see <code>€</code>. Then, when selecting another <code>li</code>, I expect to see <code>$currency</code> variable to update, but it doesn't?</p>