title: JavaScript function returns NaN when retrieving data-id from datalist option
body: <p>I'm trying to find a value of data-id from selected option in data list. I have a function which returns correct value but also is giving me a popup with 'NaN'. As a standard response to my problem I'm using 'intParse' or 'isNaN' function but nothing seems to stop returning 'NaN'<br>
  So I got two alerts . First with the correct value, and second with 'NaN' when calling this function.     </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>$("#EducationEstablishment").on('input', function() {
    var id = GetDataListOptionValue(EducationEstablishment, establishments);
    alert(id)
  });
  
  function GetDataListOptionValue(datalistInputId, dataListId) {
  
    var x = $(datalistInputId).val();
    var z = $(dataListId);
    var val = $(z).find('option[value="' + x + '"]');
    endval = val.attr('data-id');
  
    var num = isNaN(parseInt(endval)) ? 0 : parseInt(endval)
    return (num);
  
  }</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;input id="EducationEstablishment" list="establishments" type="text"&gt;
  &lt;datalist id="establishments"&gt;
    &lt;option data-id="100018962" value="Instituto Tecnologico De Buenos Aires"&gt;&lt;/option&gt;
    &lt;option data-id="100084386" value="National University of Cordoba, Argentina"&gt;&lt;/option&gt;
  &lt;/datalist&gt;</code></pre>
  </div>
  </div>
  </p>