JSFiddle - React, Tailwind, and code Playground

HTML

<script src="code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
  <body>
		<div class="wr">
			<div class="container">
				<div class="row">
					<div class="col-md-4 col-md-4 col-sm-3 col-xs-4">
						<label for="id5"><input type="checkbox" id="id5" value="5">5</label>
						<label for="id6"><input type="checkbox" id="id6" value="6">6</label>
						<label for="id7"><input type="checkbox" id="id7" value="7">7</label>
					</div>
					<div class="col-md-4 col-md-4 col-sm-3 col-xs-4">
						<select id='size' name="size">
							<option value="">--Количество--</option>
							<option value="10">10</option>
							<option value="100">100</option>
							<option value="500">500</option>
							<option value="1000">1000</option>
						</select>
					</div>
					<div class="col-md-4 col-md-4 col-sm-3 col-xs-4">
						<select id='parts' name="parts">
							<option value="">--Состав--</option>
							<option value="wit">С елементами</option>
							<option value="without">Без елементов</option>
						</select>
					</div>
				</div>
			</div>

			<div class="container">
				<div class="row">
					<div class="col-lg-4 col-md-3 col-sm-3 col-xs-3 atr" data-element='["5","100","without"]'>
						<ul>
							<li><h4>Возраст:</h4> <b>5 лет</b></li>
							<li><h4>Количество:</h4> <b>100 шт.</b></li>
							<li><h4>Состав:</h4> <b>Без елементов</b></li>
						</ul>
					</div>
					<div class="col-lg-4 col-md-3 col-sm-3 col-xs-3 atr" data-element='["6","1000","without"]'>
						<ul>
							<li><h4>Возраст:</h4> <b>6 лет</b></li>
							<li><h4>Количество:</h4> <b>1000 шт.</b></li>
							<li><h4>Состав:</h4> <b>Без елементов</b></li>
						</ul>
					</div>
					<div class="col-lg-4 col-md-3 col-sm-3 col-xs-3 atr" data-element='["7","10","wit"]'>
						<ul>
							<li><h4>Возраст:</h4> <b>7 лет</b></li>
							<li><h4>Количество:</h4> <b>10 шт.</b></li>
							<li><h4>Состав:</h4>...

CSS

* {padding: 0;margin: 0;}
body {background-color: #cecece;}
.wr {/*width: 90%;*/margin: 0 auto; background-color: #d9534f;}
.col-md-4 {text-align: center;height: 50px;border: 2px solid red; background-color: pink;margin: 20px 0;}
.col-md-4 select {margin: 14px auto 0;}
.col-lg-4 {text-align: center;height: 200px;border: 2px solid red; background-color: pink;margin: 20px 0 5px;}
.col-lg-4 ul {
  position: relative;
  overflow: hidden;
  margin: 50px auto 0;
  text-align: center;
}
.col-lg-4 li {list-style-type: none;float: left;clear: both;}
.col-lg-4 li h4 {float: left;margin: 0 20px 0 0;}
.col-lg-4 li b {text-decoration: underline; color: red;}
.success {border: 2px dotted green !important;}

JavaScript

$(document).ready(function() {
    var b = $("[data-element]");
    $("input, select").change(function() {
        var a = $('input:checkbox:checked').each(function(){
    $(this).val();
});
            d = $("#size").val(),
            e = $("#parts").val(),
            c = [a, d, e];
        b.hide().filter(function(a, b) {
            return $(b).data("element").every(function(b, a) {
                return !c[a] || c[a] == b
            })
        }).show()
    })
});