[Wordpress] 投稿記事一覧の表示(グリッド)をボタンで切り替えたい

投稿記事一覧の表示(グリッド)をボタンで切り替える方法についてご教授ください。
こんなプラグインがあるよとか、実装方法のアドバイスなどぜひよろしくお願いします。

挑戦した実装は以下に記載しています。

wordpress

WordPress 4.9.6
テーマ：自作

やりたいこと

投稿した記事についてボタン（アイコン）で表示グリッドを
切り替えたいと思っています。

実装

プラグインはグリッドデザインまではできるけど切り替えまで可能という
情報は見つけられませんでしたので、イベント処理を自作してみました。

・仕様の都合で、グリッド4の場合のclassとグリッド8の場合のclassに対して
CSSが設定されています。
このためイベント処理でclass名を変更し、デザインが切り替わってほしいと考えています。

・記事一覧はwhile文で表示。idは固有になるように設定

・ボタンをクリックしたらイベントを発生させる。

・イベント処理でclass名を変更（各idに対して）


<script>
//縦８行表示のイベント処理
jQuery(function(){
    jQuery('#grid_eight').click(function() {
	var check0 = jQuery("#pull_right_info").hasClass('col-xs-12 padding-0 margin-top-20');
						
	if( check0 ) {
	  jQuery("#pull_right_info").removeClass('col-xs-12 padding-0 margin-top-20').addClass('col-xs-12 padding-0');
	}						
								  					 
   var i = 0;

   //NUMには投稿記事数が入ります。受け渡し方法も模索中です。
   for(i=0; i<NUM;i++){
	var id_name = "#grid_info" + i;
	var check = jQuery(id_name).hasClass('col-xs-6 col-sm-3');

	if( check ) {
	  jQuery(id_name).removeClass('col-xs-6 col-sm-3').addClass('grid-8');				
	}
    }
  })
})

//４グリッド側のアイコンイベント処理
jQuery(function(){
   jQuery('#grid_four').on('click',function(){
   var check0 = jQuery("#pull_right_info").hasClass('col-xs-12 padding-0');
	 				
   if( check0 ) {
       jQuery("#pull_right_info").removeClass('col-xs-12 padding-0').addClass('col-xs-12 padding-0 margin-top-20');		
   }			

   var i = 0;

   //NUMには投稿記事数が入ります。受け渡し方法も模索中です。
   for(i=0; i<NUM;i++){
       var id_name = "#grid_info" + i;	
       var check = jQuery(id_name).hasClass('grid-8');	
						
       if( check ) {
           jQuery(id_name).removeClass('grid-8').addClass('col-xs-6 col-sm-3');
       }
   }
  })
})
</script>	
				
<?php 
//投稿記事数を取得
  $count_custom = wp_count_posts('product');
  $custom_posts = $count_custom->publish;
?>			

					
<div id="familyGrid">
<!-- grid選択ボタン -->
  <div class="pull-right col-xs-12 col-sm-6 hidden-xs margin-top-20">
    <p class="grid-button">
      <a class="hoge" href="#" id="grid_four" data-postval="<?php echo $custom_posts?>" >
      <i class="icon-grid_four"></i>
      </a>
      <a class="hoge" href="#" id="grid_eight" data-postval="<?php echo $custom_posts?>" >
      <i class="icon-grid_nine"></i>
      </a>
    </p>
  </div>				
				
					
  <div id="pull_right_info" class="col-xs-12 padding-0 margin-top-20">
				
						
<!-- 記事一覧表示 -->
<?php
    $clearfix_val = 0;
    $view_count = 0;
							
    if(have_posts()):
        while(have_posts()):
        the_post();			
			
        if(($clearfix_val % 4 == 0) && ($clearfix_val != 0)){
?>

<div  class="clearfix col-xs-12 padding-0" ></div>

<?php
       };
 	  $id_tmp = "grid_info".(string)$view_count ;
?>
	
<div id="<?php echo $id_tmp ?>" class="col-xs-6 col-sm-3">
    <button formaction="<?php the_permalink(); ?>" class="pro-div"><img src="xx" /></button>
    <h4  class="product-text"><?php the_title(); ?></h4>
</div>
<?php
    $clearfix_val++;
    $view_count++;
    endwhile;
    endif;
?>
</div>	
</div>