JSFiddle - React, Tailwind, and code Playground

by Rayon Dabre

HTML

<form>
  <select id="year" onchange='showHide(this)'>
    <option>All</option>
  </select>
  <input type="submit" value="Submit">
</form>

<form action="#" id="release_year" method="post">

  <div class="release_holder" id="2015" style="margin-bottom: 20px">
    <div class="headline-bar">2015</div>
    <div class="content">hello there</div>
  </div>

  <div class="release_holder" id="2014" style="margin-bottom: 20px">
    <div class="headline-bar">2014</div>
    <div class="content">hello there</div>
  </div>

</form>

JavaScript

var elements = document.body.getElementsByClassName("headline-bar");
var year = document.getElementById("year");
for (i = 0; i < elements.length; i++) {
  var Entry = document.createElement("option");
  Entry.text = elements[i].textContent;
  year.add(Entry, null);
}

function showHide(elem) {
  var val = elem.value;
  if (val == 'All') {
    [].forEach.call(document.querySelectorAll('.release_holder'), function(el) {
      el.style.display = 'block';
    });
  } else {
    [].forEach.call(document.querySelectorAll('.release_holder'), function(el) {
      el.style.display = 'none';
    });
    document.querySelector('[id="' + val + '"]').style.display = '';
  }

}