title: ajax call in javascript not returning items to correct lists
body: <p>I am a student and am having an issue getting information on the correct lists.   My sample data has a male runner and a female runner.  I have three lists of runners:  male, female, all.   When I run my code, nothing appears on the male and female lists but all do show up on the "all" list.    What modification do I need to get the runners on the appropriate gender lists?</p>
  
  <pre><code>function getXMLRacers() {
      $.ajax({
          url: "finishers.xml",
          cache: false,
          dataType: "xml",
          success: function (xml) {
              // Empty lists to prevent duplication.
              $("#finishers_m").empty();
              $("#finishers_f").empty();
              $("#finishers_all").empty();
  
              // Place runner name on appropriate lists.
              $(xml).find("runner").each(function () {
                  var info = "&lt;li&gt;Name: " + $(this).find("fname").text() + " " +
                      $(this).find("lname").text() + ".  Time: " + $(this).find("time").text() + "&lt;/li&gt;";
                  if ($(this).find("gender").text === "m") {
                      $("#finishers_m").append(info);
                  } else if ($(this).find("gender").text === "f") {
                      $("#finishers_f").append(info);
                  } else { }
                  $("#finishers_all").append(info);
              });
              getTime();
          }
      });
  };
  </code></pre>
  
  <p>My sample data in an XML file:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;finishers&gt;
      &lt;runner&gt;
        &lt;fname&gt;John&lt;/fname&gt;
        &lt;lname&gt;Smith&lt;/lname&gt; 
        &lt;gender&gt;m&lt;/gender&gt;
        &lt;time&gt;25:31&lt;/time&gt; 
      &lt;/runner&gt;
      &lt;runner&gt;
        &lt;fname&gt;Jane&lt;/fname&gt;
        &lt;lname&gt;Smith&lt;/lname&gt; 
        &lt;gender&gt;f&lt;/gender&gt;
        &lt;time&gt;26:01&lt;/time&gt; 
      &lt;/runner&gt;
  &lt;/finishers&gt;
  </code></pre>
  
  <p>My html file where the lists are defined:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
      &lt;head&gt; 
          &lt;title&gt;NTC Race Finishers&lt;/title&gt; 
          &lt;link href="styles/my_style.css" rel="stylesheet"&gt; 
      &lt;/head&gt; 
      &lt;body&gt; 
          &lt;header&gt; 
              &lt;h2&gt;NTC Race Finishers!&lt;/h2&gt; 
          &lt;/header&gt; 
          &lt;div id="main"&gt; 
              &lt;ul class="idTabs"&gt; 
                  &lt;li&gt;&lt;a href="#male"&gt;Male Finishers&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href="#female"&gt;Female Finishers&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href="#all"&gt;All Finishers&lt;/a&gt;&lt;/li&gt; 
              &lt;/ul&gt; 
              &lt;div id="male"&gt; 
                  &lt;h4&gt;Male Finishers&lt;/h4&gt; 
                  &lt;ul id="finishers_m"&gt;&lt;/ul&gt;
              &lt;/div&gt; 
              &lt;div id="female"&gt; 
                  &lt;h4&gt;Female Finishers&lt;/h4&gt; 
                  &lt;ul id="finishers_f"&gt;&lt;/ul&gt;
              &lt;/div&gt; 
              &lt;div id="all"&gt; 
                  &lt;h4&gt;All Finishers&lt;/h4&gt; 
                  &lt;ul id="finishers_all"&gt;&lt;/ul&gt;
              &lt;/div&gt; 
          &lt;/div&gt;
          &lt;footer&gt;
              &lt;h4&gt;Congratulations to all our finishers!&lt;/h4&gt;  
              &lt;button id="btnStart"&gt;Start Page Updates&lt;/button&gt;   
              &lt;button id="btnStop"&gt;Stop Page Updates&lt;/button&gt;
              &lt;br&gt;
              &lt;span id="freq"&gt;&lt;/span&gt;
              &lt;br&gt;&lt;br&gt;
              Last Updated: &lt;div id="updatedTime"&gt;&lt;/div&gt;
          &lt;/footer&gt;
          &lt;script src="scripts/jquery-3.4.1.min.js"&gt;&lt;/script&gt; 
          &lt;script src="scripts/jquery.idTabs.min.js"&gt;&lt;/script&gt; 
          &lt;script src="scripts/my_scripts.js"&gt;&lt;/script&gt; 
      &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>