Simple Javascript Filter

Filter should append text into the hidden input that is then matched against words in the "hidden-features" div. If any word in the hidden #filter input value matches any word in the "hidden-features" div, that singleplan should show. Otherwise, hide the plan. If all filters are empty, show all plans.

HTML

<!-- Live Search -->
<div class="livesearch">
	<form id="live-search">
		<input id="filter" class="filter-checkbox" type="hidden">
    <div class="users col">
      <h2>How many users?</h2>
		  <select id="userSelect">
        <option value="">--</option>
        <option value="1user">1</option>
        <option value="2user">2</option>
        <option value="3user">3</option>
      </select>
    </div>
    <div class="devices col">
      <h2>How many devices?</h2>
      <select id="deviceSelect">
        <option value="">--</option>
        <option value="1device">1</option>
        <option value="2device">2</option>
      </select>
    </div>
    <div class="options col">
      <h2>How do you use your internet?</h2>
      <label><input type="checkbox" class="filter-checkbox" value="streaming">Streaming</label>
      <label><input type="checkbox" class="filter-checkbox" value="gaming">Gaming</label>
    </div>
	</form>
</div>

<div id="filterplans" class="plan-filter-container">
	<div data-box-number="1" class="singleplan plan1">
		<div class="content">
			<p>Plan 1</p>
			<div class="hidden-features" style="display:none;">1user streaming</div>
		</div>
	</div>
	<div data-box-number="2" class="singleplan plan2">
		<div class="content">
			<p>Plan 2</p>
			<div class="hidden-features" style="display:none;">1user 2user 1device gaming</div>
		</div>
	</div>
	<div data-box-number="3" class="singleplan plan3">
		<div class="content">
			<p>Plan 3</p>
			<div class="hidden-features" style="display:none;">3user 2device gaming</div>
		</div>
	</div>
</div>

CSS

#live-search, #filterplans { 
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  padding:20px; 
  border:1px solid black;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.col, .singleplan {
  flex:1;
  padding:20px;
}
select {
  width:100%;
}

.singleplan {
  color:#ffffff;
}
.plan1 {
  background:red;
}
.plan2 {
  background:blue;
}
.plan3 {
  background:green;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  // Live Search
  var userSelect = document.getElementById('userSelect');
  var deviceSelect = document.getElementById('deviceSelect');
  var filterCheckboxes = document.querySelectorAll('.filter-checkbox');
  var filterInput = document.getElementById('filter');

  // Event listener for any change in inputs
  userSelect.addEventListener('change', updateFilter);
  deviceSelect.addEventListener('change', updateFilter);
  filterCheckboxes.forEach(function(checkbox) {
    checkbox.addEventListener('change', updateFilter);
  });

  function updateFilter() {

    // User and device values
    var userValue = userSelect.value;
    var deviceValue = deviceSelect.value;

    // Combine checkbox values
    var checkboxValues = Array.from(filterCheckboxes)
      .filter(function(checkbox) {
        return checkbox.checked;
      })
      .map(function(checkbox) {
        return checkbox.value;
      })
      .join(' ');

    // Combine userValue, deviceValue, checkbox values, and update the filter input
    var filterValue = userValue + ' ' + deviceValue + ' ' + checkboxValues.toLowerCase(); // Convert to lowercase for case-insensitive comparison

    filterValue = filterValue.trim();
    console.log(filterValue);

    // Update the hidden #filter input
    filterInput.value = filterValue;

    // Loop through the singleplan elements
    document.querySelectorAll('.singleplan').forEach(function(singleplan) {
      var hiddenFeaturesDiv = singleplan.querySelector('.hidden-features');
      var hiddenFeaturesText = hiddenFeaturesDiv.textContent.toLowerCase();

      console.log("hiddenFeaturesText: " + hiddenFeaturesText);

      // Split the comma-separated text into an array of words
      var hiddenFeaturesWords = hiddenFeaturesText.split(' ').map(function(word) {
        return word.trim();
      });

      console.log(hiddenFeaturesWords);

      // Check if userValue is present in hiddenFeaturesWords
      var...