jQuery filters sometimes showing all elements

http://stackoverflow.com/q/36706999/1430996

by Jeromy French

HTML

<section>
  <div class="container" id="jobs-container">
    <h1>Open jobs</h1>
    <div class="jobs-teams">
      <select>
      </select>
    </div>
    <div class="jobs-list">
    </div>
  </div>
</section>

CSS

body {
  font-family: 'Lato', sans-serif;
  overflow-y: scroll;
}

p {
  margin: 0 0 1em 0;
  line-height: 1.4em;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

section {
  position: relative;
  padding: 30px;
}

.container {
  max-width: 960px;
  margin: 0 auto;
}

.job {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  padding: 40px 30px;
}

h1 {
  font-size: 48px;
  color: #454545;
  padding: 0 30px;
}

.job-title {
  font-size: 24px;
  text-decoration: none;
  color: #454545;
}

.job-title:hover {
  color: #00A0DF;
}

.tags span {
  color: #999;
  font-size: 12px;
  color: grayMediumDark;
}

.tags span:after {
  content: ', ';
}

.tags span:last-of-type:after {
  content: '';
}

.description {
  color: #999;
}

.btn {
  display: inline-block;
  padding: 7px 15px;
  text-decoration: none;
  font-weight: normal;
  color: #999;
  border: 2px solid #ebebeb;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  background: #f9f9f9;
}

.btn:hover {
  background: #ebebeb;
  color: #555;
}

.btn.active {
  background: #454545;
  border-color: #454545;
  color: #fff;
}

.jobs-teams {
  margin-bottom: 40px;
  padding: 0 30px
}

.jobs-teams .btn {
  margin: 0 8px 8px 0;
}

.jobs-teams .btn:first-of-type {
  margin-left: 0;
}

.jobs-teams .btn:last-of-type {
  margin-right: 0;
}

JavaScript

// Replace "leverdemo" with your own company name
url = 'https://api.lever.co/v0/postings/leverdemo?group=team&mode=json'

//Functions for checking if the variable is unspecified
function cleanString(string) {
  if (string) {
    var cleanString = string.replace(/\s+/ig, "");
    return cleanString;
  } else {
    return "Uncategorized";
  }
}

function nullCheck(string) {
  if (!string) {
    var result = 'Uncategorized'
    return result;
  } else {
    return string;
  }
}

function createJobs(_data) {
  for (i = 0; i < _data.length; i++) {

    var team = nullCheck(_data[i].title)
    var teamCleanString = cleanString(team);
    $('#jobs-container .jobs-teams select').append(
      '<option value="" class=' + teamCleanString + '>' + team + '</option>'
    );
  }

  for (i = 0; i < _data.length; i++) {
    for (j = 0; j < _data[i].postings.length; j++) {
      var posting = _data[i].postings[j]
      var title = posting.text
      var description = posting.description
        //Making each job description shorter than 250 characters
      var shortDescription = $.trim(description).substring(0, 250)
        .replace('\n', ' ') + "...";
      var location = nullCheck(posting.categories.location);
      var locationCleanString = cleanString(location);
      var commitment = nullCheck(posting.categories.commitment);
      var commitmentCleanString = cleanString(commitment);
      var team = nullCheck(posting.categories.team);
      var teamCleanString = cleanString(team);
      var link = posting.hostedUrl;

      $('#jobs-container .jobs-list').append(
        '<div class="job ' + teamCleanString + ' ' + locationCleanString + ' ' + commitmentCleanString + '">' +
        '<a class="job-title" href="' + link + '"">' + title + '</a>' +
        '<p class="tags"><span>' + team + '</span><span>' + location + '</span><span>' + commitment + '</span></p>' +
        '<p class="description">' + shortDescription + '</p>' +
        '<a class="btn" href="' + link + '">Learn...