JSFiddle - React, Tailwind, and code Playground

by gricha2380

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<body>
  <div id="buttons" class="row">
  <h4>
  Filter by House
  </h4>
    <!-- <button class="houseSelector">Gryffindor</button>
    <button class="houseSelector">Hufflepuff</button>
    <button class="houseSelector">Slytherin</button>
    <button class="houseSelector">Ravenclaw</button> -->
  </div>
  <div class="row">
  <h4>
  Reset all Filters
  </h4>
    <button class="reset">Reset</button>
  </div>
  <div class="row">
  <h4>
  Toggle Visibility
  </h4>
    <button class="toggle" id="Gryffindor">Gryffindor</button>
    <button class="toggle" id="Hufflepuff">Hufflepuff</button>
    <button class="toggle" id="Slytherin">Slytherin</button>
    <button class="toggle" id="Ravenclaw">Ravenclaw</button>
  </div>


  <table border='1'>
    <tr>
      <th>Name</th>
      <th>Role</th>
      <th>House</th>
      <th>Gender</th>
      <th>Aligns</th>
    </tr>
  </table>
</body>

CSS

.row {
	padding: 10px 0;
}

h4 {
	padding: 0;
	margin: 0;
}

table tr:odd {
	background-color: red;
}

body {
	background-color: green;
}

JavaScript

// list of characters
  var characters = [{
    name: "Albus Dumbledore",
    role: "staff",
    house: "Gryffindor",
    gender: "m",
    alignment: "good"
  }, {
    name: "Nymphadora Tonks",
    role: "",
    house: "Hufflepuff",
    gender: "f",
    alignment: "good"
  }, {
    name: "Ron Weasley",
    role: "student",
    house: "Gryffindor",
    gender: "m",
    alignment: "good"
  }, {
    name: "Ginny Weasley",
    role: "student",
    house: "Gryffindor",
    gender: "f",
    alignment: "good"
  }, {
    name: "Hermione Granger",
    role: "student",
    house: "Gryffindor",
    gender: "f",
    alignment: "good"
  }, {
    name: "Mad-eye Moody",
    role: "staff",
    house: "",
    gender: "m",
    alignment: "good"
  }, {
    name: "Prof McGonagall",
    role: "staff",
    house: "Gryffindor",
    gender: "f",
    alignment: "good"
  }, {
    name: "Harry Potter",
    role: "student",
    house: "Gryffindor",
    gender: "m",
    alignment: "good"
  }, {
    name: "Draco Malfoy",
    role: "student",
    house: "Slytherin",
    gender: "m",
    alignment: "evil"
  }, {
    name: "Hagrid",
    role: "staff",
    house: "Gryffindor",
    gender: "m",
    alignment: "good"
  }, {
    name: "Luna Lovegood",
    role: "student",
    house: "Ravenclaw",
    gender: "f",
    alignment: "good"
  }, {
    name: "Voldemort",
    role: "",
    house: "Slytherin",
    gender: "m",
    alignment: "evil"
  }, {
    name: "Bellatrix Lestrange",
    role: "",
    house: "Slytherin",
    gender: "f",
    alignment: "evil"
  }, {
    name: "Severus Snape",
    role: "staff",
    house: "Slytherin",
    gender: "m",
    alignment: "?"
  }];
  
  // MAIN
  
  $(document).ready(function() {
    // add table row for each character
    defaultTableImproved();
    // generate button for each unique house
    $(".houseSelector").on("click", function() {
      $("table").replaceWith("<table border='1'> <tr> <th>Name</th> <th>Role</th> <th>House</th> <th>Gender</th>...