title: jQuery variable is defined multiple times: for events and when the page loads
body: <p>I have a form where a user selects a country from a list. When the page loads either the first country in the list, or the country of the user that has been set previously is shown. 
  If the selected country is one that is in an array <code>EUcountries</code>, a div with a field is shown. </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>var EUcountries = [
      "AD",
      "BE",
      "BG",
  ];
  
  // this is for when the page loads
  var inputCountry = $("#countries").val();
  
  if ($.inArray(inputCountry, EUcountries) != -1) {
      $('#EUdiv').show();
  }
  else {
      $('#EUdiv').hide();
  }
  
  // this is for when the user selects a country.
  $("#countries").on('input', function () {
  
      var inputCountry = $("#countries").val();
  
      if ($.inArray(inputCountry, EUcountries) != -1) {
          $('#EUdiv').show();
      }
      else {
          $('#EUdiv').hide();
      }
  });</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;select id="countries" name="countries" class="form-control"&gt;
    &lt;option value="AF"&gt;Afghanistan&lt;/option&gt;
    &lt;option value="AL"&gt;Albania&lt;/option&gt;
    &lt;option value="DZ"&gt;Algeria&lt;/option&gt;
    &lt;option value="AS"&gt;American Samoa&lt;/option&gt;
    &lt;option value="AD"&gt;Andorra&lt;/option&gt;
    &lt;option value="AO"&gt;Angola&lt;/option&gt;
    &lt;option value="AI"&gt;Anguilla&lt;/option&gt;
    &lt;option value="AQ"&gt;Antarctica&lt;/option&gt;
    &lt;option value="AG"&gt;Antigua &amp;amp; Barbuda&lt;/option&gt;
    &lt;option value="AR"&gt;Argentina&lt;/option&gt;
    &lt;option value="AM"&gt;Armenia&lt;/option&gt;
  &lt;/select&gt;
  &lt;br&gt;
  &lt;div id="EUdiv"&gt;
    &lt;input id="euField"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see I am setting <code>var inputCountry</code> once the page loads (because the country can already be set) and every time the input is changed.</p>
  
  <p><strong>Is this the way to go or will I run into problems?</strong></p>
  
  <p>(Select Andorra to see it work)</p>