JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="list-wrap">
    <ul class="list" data-attribute="type">
      <li>
        <input type="radio" data-filter="false" name="type" id="clear-type" value="clear-type" checked="checked">
        <label for="clear-type">Clear type</label>
      </li>
      <li>
        <input type="radio" data-filter="false" name="type" id="ford" value="ford">
        <label for="ford">Ford</label>
      </li>
      <li>
        <input type="radio" data-filter="false" name="type" id="jeep" value="Jeep">
        <label for="Jeep">Jeep</label>
      </li>
      <li>
        <input type="radio" data-filter="false" name="type" id="audi" value="Audi">
        <label for="Audi">Audi</label>
      </li>
    </ul>
    <ul class="list" data-attribute="color">
      <li>
        <input type="radio" data-filter="false" name="color" id="clear-color" value="clear-color" checked="checked">
        <label for="clear-color">Clear Color</label>
      </li>
      <li>
        <input type="radio" data-filter="false" name="color" id="blue" value="blue">
        <label for="blue">Blue</label>
      </li>
      <li>
        <input type="radio" data-filter="false" name="color" id="green" value="green">
        <label for="green">Green</label>
      </li>
    </ul>
  </div>

  <div class="results">
    <div class="car active ford green">
				<h4>Type: Ford</h4>
				<h5>Color: Green</h5>
				<p>Lorem.</p>
			</div>
			<div class="car active ford blue">
				<h4>Type: Ford</h4>
				<h5>Color: Blue</h5>
				<p>Lorem.</p>
			</div>
			<div class="car active ford blue">
				<h4>Type: Ford</h4>
				<h5>Color: Blue</h5>
				<p>Lorem.</p>
			</div>
			<div class="car active audi green">
				<h4>Type: Audi</h4>
				<h5>Color: Green</h5>
				<p>Lorem.</p>
			</div>
			<div class="car active audi blue">
				<h4>Type: Audi</h4>
				<h5>Color: Blue</h5>
				<p>Lorem.</p>
			</div>
			<div class="car active jeep blue">
				<h4>Type: Jeep</h4>
				<h5>Color: Blue</h5>
				<p>Lorem.</p>
			</div>
			<div...

CSS

ul,
li {
  display: inline-block;
}

h4,
h5 {
  margin: 0 0 10px 0;
}

.car {
  width: 600px;
  border: 5px solid lightblue;
  margin: 5px;
  padding: 10px;
  display: none;
}

.active {
  display: inline-block;
}

.jeep h4,
.ford h4,
.audi h4 {
  border-left-color: black;
  border-left-width: 5px;
  padding-left: 5px;
}

.jeep h4 {
  border-left-style: solid;
}

.ford h4 {
  border-left-style: dotted;
}

.audi h4 {
  border-left-style: double;
}

.green h5 {
  color: green;
}

.blue h5 {
  color: blue;
}

JavaScript

var i,
	    index,
		boxes,
		row,
		classNames = [],
		className,
		resetNames = [],
		resetName,
		results;

	$('.list').on('click', 'input', function(event){

		// Set defualt
		// reset = false;

		// Get the title of the row to be used later
		row = $(this).parents('.list').attr('data-attribute');
		
		// Hide all results
		$('.results').find('.car').removeClass('active');

		$(this).parents('.list[data-attribute="' + row + '"]').find('input').attr('data-filter', 'false');

		if( $(this).attr('value') == ('clear-' + row) ) {
			console.log('reset button: ' + row);

			//reset = true;
			resetNames = $('.list[data-attribute="' + row + '"]').find('input:not([id="clear-' + row + '"])');

			console.log(resetNames);
			$.each(resetNames, function(i, resetName) {
				resetName = $(resetName).attr('id');
				console.log(resetName);
				$('.results').find('.' + resetName).removeClass('active');
			});

		} else {

			// Set the current clicked to TRUE
			$(this).attr('data-filter', 'true');

		};

		// Go get all the list inputs with data-filter="true"
		// incase there have been previous clicks
		classNames = $(this).parents('.list-wrap').find('input[data-filter="true"]');
		console.log('length is: ' + classNames.length);

		// If all data-filter="false" exit and reset results
		// this means another filter name group has been set to 'clear' 
		if(classNames.length === 0) {
			$('.results').find('.car').addClass('active');
			// exit
			return;
		} 

		$.each(classNames, function(index, className) {
			
			className = $(className).attr('id');
			console.log(className);
			console.log(index);


			// It would be nice to allow for a larger loop (if more filters are added in the future)
			// Currently basing the following statement on an array size of 2
			// Filtering down the already filterd results
			// if(index !== classNames.length) didn't work
			if(index === 0) {
				console.log('its; 0');
				results = $('.results').find('.' +...