Reformat the availability table in WebPAC Pro from III

availability.css

.briefCitRow td[width="5%"] { width: 3em; }
.briefCitRow input[type="checkbox"] { float: left; width:auto;}
.briefcitEntryNum { float: right; padding-top: .25em; padding-right:1em; font-weight: normal;}

.briefcitDetail { padding: .5em 0; line-height: 1.4em; font-size:.85em; color: #555; }
.briefcitTitle {display:block; font-size: 1.15em; font-weight: bold;}
td.briefcitDetail br:nth-child(2) {
    display: none;
}

.briefcitTitle a {
	text-decoration: none;
}
.briefcitItems table {
	margin-top:1.5em;
}
tr.bibItemsHeader {
    display: none !important;
}

.briefcitItems table tbody tr.bibItemsEntry td {
	width: auto !important;
}

tr.bibItemsEntry {
 color: #555;
}

.location br { display: none;}

.bibItemsEntry td {
	border-bottom: none;
	padding-top: .25em;
}

.avail {
    padding: .25em .5em !important;
}
.available {
    background-color: green;
    color: white;
 }

.bibItemsEntry td[width="38%"] a {
     display: inline-block; 
     margin: 0 !important;
 }

.unavailable {
	background-color: red;
	    color: white;

 }

availabilityTable.js

String.prototype.toProperCase = function () {
    return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
};

$('tr.bibItemsEntry').each(function() {
	
	var availability = $(this).find('td[width="24%"]').text();
	var location = $(this).find('td:nth-child(1)').text();
	var callnotext = $(this).find('td:nth-child(2)').text();
	var callno = callnotext.split('Browse Similar');
	locationText = location.split('<br>');
	console.log(availability);

	/* Create Availability Span */
	availability = availability.trim();
	var newAvailability = document.createElement('span');
	if(availability == 'AVAILABLE') {
		newAvailability.className = 'available avail';
	} else {
		newAvailability.className = 'unavailable avail';
	}
	newAvailability.innerText = availability.toProperCase();

	/* Create Location Span */
	var newLocation = document.createElement('span');
	newLocation.className = 'location';
	newLocation.innerText = locationText[0];

	/* Create Call Number Span */
	var newCallNo = document.createElement('span');
	newCallNo.className = 'call-number';
	newCallNo.innerText = callno[0];

	/* Create new availability line */
	var newLine = document.createElement('div');
	newLine.class = 'availability-table';
	newLine.appendChild(newAvailability);
	newLine.appendChild(newLocation);
	newLine.appendChild(newCallNo);

	$(this).closest('.briefcitItems').append(newLine);
	$(this).hide();

});

Screenshot.markdown