JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<div>
  <label>Filters:</label>
  <div class="selectBox" id="capacitySelect">
    <span class="selected" id="selVal"></span>
    <span class="selectArrow">&#9660;</span>
    <div class="selectOptions">
      <!-- options generated by js -->
    </div>
  </div>
  <label id="capVideo"><input type="checkbox" id="withVideo" onclick="filterTable()"> with video</label>
  <div class="selectBox" id="avSelect">
    <span class="selected">AV Required</span>
    <span class="selectArrow">&#9660;</span>
    <div class="selectOptions">
      <label><input type="checkbox" id="selfService" name="av" onclick="filterTable(); updateButtonBackground()"> Self service</label><br>
      <label><input type="checkbox" id="msTeams" name="av" onclick="filterTable(); updateButtonBackground()"> MS Teams w/o SIP</label><br>
      <label><input type="checkbox" id="wiredWireless" name="av" onclick="filterTable(); updateButtonBackground()"> Wired + wireless laptop connection</label><br>
      <label><input type="checkbox" id="digWhiteboard" name="av" onclick="filterTable(); updateButtonBackground()"> Digital Whiteboard</label><br>
      <label><input type="checkbox" id="inRoomPC" name="av" onclick="filterTable(); updateButtonBackground()"> In room PC</label>
    </div>
  </div>
  <button id="resetBtn" onclick="resetFilters()">Reset</button>
</div>


<table id="roomTable">
  <thead>
    <tr>
      <th>Room</th>
      <th>Capacity/Type</th>
      <!-- <th>Interior/Interior</th> -->
      <th>AV Capabilities</th>
      <th>Display Size</th>
      <th>Photo</th>
    </tr>
  </thead>
  <tbody id="roomRows">
    <tr data-fl="8" data-maxcap="16" data-maxcapV="15" data-teams="n" data-ss="y" data-wiredwireless="y" data-wb="n" data-roompc="y" data-screenSize="82">
      <td class="roomNum">802</td>
      <td class="roomCap">16/15 (with video)</td>
      <td>
        <ul class="roomAv">
          <li class="msteams"></li>
          <li class="selfServ">Self Service</li>
          <li...

CSS

table {
     width: 100%;
     border-collapse: collapse;
   }

   th,
   td {
     border-bottom: 1px solid #000;
     padding: 8px;
     text-align: left;
   }

   th {
     color: #140be3;
     border-bottom: 3px solid #140be3;
   }

   ul {
     list-style: none;
     margin: 0;
     padding: 0;
   }

   ul>li:before {
     content: "– ";
     color: #140be3;
   }

   .dropdown {
     position: relative;
     display: inline-block;
   }

   .dropdown-content {
     display: none;
     position: absolute;
     background-color: #f9f9f9;
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     padding: 10px;
     z-index: 1;
   }

   .dropdown-button {
     background-color: #f1f1f1;
     /* Default background */
     border: none;
     cursor: pointer;
     padding: 8px;
     margin-top: 2px;
     border-radius: 6px;
   }

   #avSelect.checked > span{
     background: #140be3;
     color: #fff;
     background-color: #140be3;
   }

   #resetBtn {
     background-color: #f1f1f1;
     /* Default background */
     border: none;
     cursor: pointer;
     padding: 8px;
     margin-top: 2px;
     border-radius: 6px;
   }


   .selectBox {
     position: relative;
     display: inline-block;
     cursor: default;
     text-align: left;
     clear: both;
   }

   span.selected,
   span.selectArrow {
     padding: 0 10px;
     border: 1px solid #ccc;
     background: #f6f6f6;
     position: relative;
     float: left;
     height: 25px;
     line-height: 25px;
     cursor: pointer;
   }

   span.selected {
     border-right: none;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
   }

   span.selectArrow {
     width: 10px;
     text-align: center;
     font-size: 10px;
   }
   
   span.selectArrow:hover {
     background-color: #140be3;
     color: #fff;
   }

   div.selectOptions {
     position: absolute;
     top: 30px;
     left: 0;
     right: 0;
     border: 1px solid #ccc;
     border-top: none;
     overflow: hidden;
     background:...

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  var capSelectBox = document.getElementById('capacitySelect');
  var capOptionsContainer = capSelectBox.querySelector('.selectOptions');
  var capSelectedSpan = capSelectBox.querySelector('.selected');

  var avSelectBox = document.getElementById('avSelect');
  var avOptionsContainer = avSelectBox.querySelector('.selectOptions');

  // Add 'Any' option
  var anyOption = document.createElement('span');
  anyOption.className = 'selectOption';
  anyOption.setAttribute('data-value', '');  // Empty value to signify no filter
  anyOption.textContent = 'Any';
  anyOption.addEventListener('click', function() {
    capSelectedSpan.textContent = 'Min Capacity'; // Set back to placeholder when 'Any' is selected
    capSelectedSpan.removeAttribute('data-value'); // Remove attribute when 'Any' is selected
    capOptionsContainer.style.display = 'none';
    filterTable(); // Trigger filtering upon selection
  });
  capOptionsContainer.appendChild(anyOption);

  // Add other options
  for (var i = 2; i <= 26; i += 2) {
    var optionSpan = document.createElement('span');
    optionSpan.className = 'selectOption';
    optionSpan.setAttribute('data-value', i); 
    optionSpan.textContent = i;
    optionSpan.addEventListener('click', function() {
      capSelectedSpan.textContent = this.textContent;
      capSelectedSpan.setAttribute('data-value', this.getAttribute('data-value'));
      capOptionsContainer.style.display = 'none';
      filterTable();
    });
    capOptionsContainer.appendChild(optionSpan);
  }

  capSelectedSpan.textContent = 'Min Capacity'; // Initial placeholder text
  
  capSelectBox.querySelector('.selectArrow').addEventListener('click', function() {
    capOptionsContainer.style.display = capOptionsContainer.style.display === 'block' ? 'none' : 'block';
  });  
  avSelectBox.querySelector('.selectArrow').addEventListener('click', function() {
    avOptionsContainer.style.display =...