Multiple data-tag with subcategories in jquery

[Anita_Bhave]

Hi,
I am very new to jquery and using following function to filter products by clicking checkboxes.

<script>
  $(document).ready(function(){
    $('.category').on('change', function(){
      var category_list = [];
      $('#filters :input:checked').each(function(){
        var category = $(this).val();
        category_list.push(category);
      });

      if(category_list.length === 0)
        $('.resultblock').fadeIn();
      else {
        $('.resultblock').each(function(){
var item = $(this).attr('data-tag');
var itemarr = item.split(',');
$this = $(this);
$.each(itemarr,function(ind,val){
if(jQuery.inArray(val,category_list) > -1){
$this.fadeIn('slow');
return false;
}
else
$this.hide();
});   
          });
        }
  }); 
    
  });
  </script>

This code seems to work for single group of checkboxes. My code is as follows:

<?php 
    $sel = mysql_query("SELECT * FROM er_three_stone"); 
    $i = 1; 
    while($r = mysql_fetch_array($sel)){  
     
    $metal = $r['er_three_stone_metal']; 
    $shape = $r['er_three_stone_stone_shape']; 
    $type = $r['er_three_stone_type']; 
    ?> 
    <div class="resultblock" data-tag="<?php echo $metal.",".$shape.",".$type; ?>"> 
      <img src="images/1.jpg" id="item-<?php echo $i; ?>" /> 
      </div> 
      <?php $i++;  
      } ?>

filter block:

Metal : echo '<div id="filters"> 
<div class="filterblock">';echo get_metal_list($field,$db);  echo '</div></div>'; 
Shape : echo '<div id="filters"> 
<div class="filterblock">';echo get_shape_list($field1,$db); echo '</div></div>'; 
Type : echo '<div id="filters"> 
<div class="filterblock">'; echo get_type_list($field2,$db); echo '</div></div>';  

Can anyone please give me idea about implementing data-tag with subcategories to my current code? Thanks in anticipation