title: Array showing undefined in if statement
body: <p>I have a block of HTML markup that looks something like this for a Course. This is predefined by the CMS my client's using</p>
  
  <pre><code>&lt;ul class="box-3036"&gt;
    &lt;li aria-selected="true"&gt;
      &lt;a href="#" id="ui-id-5"&gt;Dentistry&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I have a bunch of courses, here's another example of this HTML block for another course.</p>
  
  <pre><code>&lt;ul class="box-3032"&gt;
    &lt;li aria-selected="true"&gt;
      &lt;a href="#" id="ui-id-7"&gt;Pharmacy&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I am trying to write a jQuery code for all these courses. From the HTML block, here are the unique info</p>
  
  <ul>
  <li>the <code>&lt;ul&gt;</code> class</li>
  <li>the <code>&lt;a&gt;</code> id</li>
  <li>and the <code>&lt;a&gt;</code> click will open up two course URLs</li>
  </ul>
  
  <p>Here's the jQuery code I have now. The problem I am facing is that the URL vars is giving me <em>undefined</em> value</p>
  
  <pre><code>box = [
    ".box-3036",
    ".box-3032"
  ];  
  
  uiid = [
    "a#ui-id-5",
    "a#ui-id-7"
  ];  
  
  urlfirst = [
    "http://www.yahoo.com",
    "http://www.gmail.com"
  ];
  
  urlsecond = [
    "http://www.google.com",
    "http://www.7senarai.com "
  ];   
  
  
  
  for (var i = 0; i &lt; box.length; i++) {
          $(box[i] + " " + uiid[i]).click(function() {
  
        var pid = $(this).parent().attr("aria-selected");
        if(pid == "true") { 
          //window.open(urlfirst[i], '_blank');
          //window.location.href = urlsecond[i];
          alert(urlfirst[i]);
          alert(urlsecond[i]);
  
        }
      });
  
  }
  </code></pre>
  
  <p>Here's my <a href="https://jsfiddle.net/iwanikhalid/go6feLsh/29/" rel="nofollow noreferrer">jsfiddle</a></p>