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

        // 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();

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

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