FRONTEND_MVC/views/reaction-buttons/button.php

<?php
use app\models\ReactionButtons;
if( isset($id) && isset($type) ){
	$filterurl = \yii\helpers\Url::base('https')."/reactionbuttons/ajax";
	$getrurl = \yii\helpers\Url::base('https')."/reactionbuttons/get";
	$model = ReactionButtons::findOne(['id'=>$id, 'type'=>$type]);
	if( ( !$model instanceof ReactionButtons ) ){
		$counters=[0,0,0,0,0,0];
	}else{
		$counters =json_decode(  $model->counter, true );
	}
?>
<style>
.reationbutton{
	filter: grayscale(1);
	transform: scale(1);
	display:block;
}
.reationbutton:hover{
	filter: grayscale(0);
	transform: scale(1.15);
}
.reactionb i{
	text-align:center;
	font-style: normal;
	color:#aaa;
	font-weight: 600;
	font-size:10px;
	margin:5px;
	line-height: 14px;
}
.reationbutton.active{
		filter: grayscale(0);
}
</style>
<div class="btn-group reactionb">
<?
	foreach( $counters as $key=>$val ){
?>
	<i><img src="/img/reactionbutton/<?=$key+1?>.svg" width="32px" heght="32px" class="reationbutton<?=$val?' active':''?>" onclick="reaction(<?=$key?>)"  id="rbki_<?=$key?>"><p id="rbk_<?=$key?>"><?=$val?></p></i>
<?
		$key++;
	}
?>
</div>
<?

$this->registerJs(
<<<JS
	function reaction(vote){
		$.post( "$filterurl", { 'id': $id, 'type': '$type', 'vote':vote}, function( data ) {
			console.log(data);
			if( data.status == 'ok' ){
				if( Array.isArray(data.ret) ){
					data.ret.forEach((item, key) => {
						$('#rbk_'+key).text(item);
						if( item > 0 ) $('#rbki_'+key).addClass('active');
					});
				}
			}
		});
	}
JS
    ,
    yii\web\View::POS_END,
    'reaction'
);
$this->registerJs(
<<<JS
	setTimeout(() => {
		$.post( "$getrurl", { 'id': $id, 'type': '$type'}, function( data ) {
			if( data.status == 'ok' ){
				if( Array.isArray(data.ret) ){
					data.ret.forEach((item, key) => {
						$('#rbk_'+key).text(item);
						if( item > 0 ) $('#rbki_'+key).addClass('active');
					});
				}
			}
		});
	}, 5000 );
JS
    ,
    yii\web\View::POS_END,
    'reaction2'
);

}