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 index,
  row,
  classNames = [],
  reset,
  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');

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

  } else {
    // Set all to FALSE
    $(this).parents('.list[data-attribute="' + row + '"]').find('input').attr('data-filter', 'false');

    // 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"]');

  $.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) {

      results = $('.results').find('.' + className);
      results.addClass('active');
    } else {

      results = $('.results').find(':not(.active.' + className + ')');
      console.log(results);
      results.removeClass('active');
    }
  });
});