<h1>test some stuff</h1>
  <form>

    <input type="checkbox" name="brand" value="Brand 1" id="ch1"> <p>Brand 1</p><br>
    <input type="checkbox" name="brand" value="Brand 2" id="ch2"> <p>Brand 2</p><br>
    <input type="checkbox" name="brand" value="Brand 3" id="ch3"> <p>Brand 3</p><br>

    <a id="btnRefresh" href="javascript:void(0);">refresh!</a>

  </form>

  <hr>

  <div id="main">
    <div id="component">
      <h6>Brand received:</h6>
      <ul>

        <?
        $tArray = ['Brand 1', 'Brand 1', 'Brand 1', 'Brand 2', 'Brand 2', 'Brand 2', 'Brand 3', 'Brand 3', 'Brand 3'];
        ?>

        <?foreach($tArray as $Brand):?>

        <li><?echo $Brand?></li>

        <?endforeach;?>

      </ul>
    </div>

  </div>


  <script>
    $(document).ready(function () {

//function for refreshing component
function refresh () {
  var data = $('form').serialize();
  $.ajax({
    type: "POST",
    url: "component.php",
    data: {data},
    success: function(component){
      $('#main').children('#component').remove();
      $('#main').hide().append(component).fadeIn(400);
    }
  });
}

$("input[type='checkbox']").on('click', refresh);
});
</script>

//////////////////////////////////////////////////////////////////////////////////////////////

<?
$tArray = ['Brand 1', 'Brand 1', 'Brand 1', 'Brand 2', 'Brand 2', 'Brand 2', 'Brand 3', 'Brand 3', 'Brand 3'];
?>


<?//logic for filtering
//making array w/ brands
if($_REQUEST){
//exploding
$brandArray = explode('&', $_REQUEST['data']);
//empty array for items
$resultArray = [];

	foreach($brandArray as $brand) {
		//normal brandname
	$brand = substr(urldecode($brand),6);
				//check every item
			foreach($tArray as $item) {
			if ($brand != $item) {
			} else {
				//adding to result array
				array_push($resultArray, $item);
			}
		}
	}
}
?>

<div id="component">
<h6>Brand received: <?print_r ($_REQUEST);?></h6>
<ul>

<?foreach($resultArray as $Brand):?>

<li><?echo $Brand?></li>

<?endforeach;?>

</ul>
</div>