JSFiddle - React, Tailwind, and code Playground

HTML

<div class="review">
    <div class="review-tabs">
        <ul>
            <li id="review-block-1">1</li>
            <li id="review-block-2">2</li>
            <li id="review-block-3">3</li>
            <li id="review-block-4">4</li>
        </ul>
    </div>
    <div class="review-block review-block-1">review-block-1</div>
    <div class="review-block review-block-2">review-block-2</div>
    <div class="review-block review-block-3">review-block-3</div>
    <div class="review-block review-block-4">review-block-4</div>
</div>

CSS

.review-tabs li {
    cursor: pointer;
}
.review-tabs li:hover, .review-tabs li.active {
    font-weight: bold;
}
.review-block {
	display: none;
}
.review-block-1 {
	display: block;
}

JavaScript

$(document).ready(function() {
    $(".review").hover(function(){
		$(".review-tabs li").click(function(){
			$(".review-tabs li").attr("class","");
			$(this).attr("class","active");
			var reviewId = $(".review-tabs li.active").attr("id");
			$(".review-block").hide();
			$("."+reviewId).show();
		});
	},
	function(){
		var i = 1;
		var reviewLength = $(".review-block").length;
		(function() {
			if (i <= reviewLength) {
				$(".review-tabs li").attr("class","");
				$("#review-block-"+i).attr("class","active");
				$(".review-block").hide();
				$(".review-block-"+i).show();
				if(i == reviewLength) {
					i = 1;
				}
				else {
					document.body.innerHTML += i;
					i++;
				};
				setTimeout(arguments.callee, 1000);
			}
		})();
	});
});