JSFiddle - React, Tailwind, and code Playground

HTML

<div id="vid1">
    1
</div>
<div id="vid2">
    2
</div>
<div id="vid3">
    3
</div>
<div id="vid4">
    4
</div>
<a id="prev-vid">prev-vid</a>
<a id="next-vid">next-vid</a>

CSS

div{width:100px;height:100px;background:red;}

JavaScript

var vid=1;
$('#next-vid').click(function(){
    vid = vid === 4 ? 1 : vid+1;
	$('[id^="vid"]').hide();
	$('#vid'+vid).show();
});
$('#prev-vid').click(function(){
    vid = vid === 1 ? 4 : vid-1;
	$('[id^="vid"]').hide();
	$('#vid'+vid).show();
});