Pull From XML with jQuery

Why are you reading this....? Seriously, just read the title.

by Cory Hughes

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
    <div class="col-md-12">
        <ul id="jobListings" class="list-group">

        </ul>
    </div>
</div>
<!-- Template: -->
<!-- <li class="list-group-item">
				<p>
					<span class="lead"><strong>Template Job Title </strong></span>
					City, ON, Canada <b class="lead">|</b> Full Time - Hourly <b class="lead">|</b>
					
					<small><em>Apply By 2019-05-25</em></small>
					<a class="btn btn-primary pull-right">Apply</a>
				</p>
				<p>Job Details: </p>
			</li> -->

CSS

body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
}

#jobListings {
    list-style-type: none;
}
#jobListings li {
    background: #f2f2f2;
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
	position: relative;
}
#jobListings li a,
#jobListings li p {
    margin: 0;
	display:block
}
#jobListings a.btn {
	color: #fff;
	top: 7px;
	right: 7px;
	position: absolute;
}

JavaScript

$(document).ready(function() {
 	/* Global Vars */
	var jobs = '';
    console.log("I'm Ready! I'm Ready! I'm Ready-eady-eady!");
    getJobListings();
});

function getJobListings() {
    $.ajax({
        type: "get",
        url: "https://tph.prevueaps.ca/feeds/diversity_by_domain.xml",
        dataType: "xml",
        success: function(data) {
            /* handle data here */
            var xml = $(data);
            parseXml(xml);
        },
        error: function(xhr, status) {
            /* handle error here */
            $("#jobListings").html("Something went wrong. <a href='#' id='refreshJobList'> Refreshing</a>.");
        }
    });
}

function parseXml(xml) {
    console.log("Whoop!");
    jobs = $(xml).find("job");
	var size = Object.keys(jobs).length-2;
    console.log(size);
	/* var jobscalc = size-2; */

    if (size > 0) {
    	console.log("There are " + size + " Jobs!")
		jobsMarkup();
    } else {
    	console.log("There are no Job Listings at this time.")
		$("#jobListings").append(
            "<p class='text-center'>" +
            "There are no Job Postings at this time.<br>" +
            "<a href='#' id='refreshJobList'><i class='fa fa-refresh'></i> Refresh</a>" +
            "</p>"
        )
	}
}
function jobsMarkup() {
	$(jobs).each(function() {		
		var applyurl = $(this).find("applyurl").text();
		var startDate = $(this).find("startDate").text();
		var endDate = $(this).find("endDate").text();
		var title = $(this).find("csTitle").text();
		var city = $(this).find("city").text();
		var description = $(this).find("description").text();
		var company = $(this).find("company").text();
		var state = $(this).find("state").text();
		var country = $(this).find("country").text();
		var employmentType = $(this).find("employmentType").text();
		var department = $(this).find("department").text();
		var job_category = $(this).find("job_category").text();
		var url = $(this).find("url").text();
		var referenceNumber =...