JSFiddle - React, Tailwind, and code Playground

HTML

<input id="0" type="radio" name="op">
<input id="1" type="radio" name="op">
<input id="2" type="radio" name="op">
<input id="3" type="radio" name="op">

CSS

div {
    display: none;
    position: absolute;
    top:50px;
}

JavaScript

var $elements = $('#One, #Two, #Three, #Four');
var animLoop;
function anim_loop(index) {
    $elements.eq(index).fadeIn(1000, function() {
        var $self = $(this);
        $("#"+(index)).prop("checked", true);
        animLoop = setTimeout(function() {
            anim_loop((index + 1) % $elements.length);
            $("input").prop("checked", false);
            $("#"+(index +1)).prop("checked", true);
        }, 3000);
    });
}

anim_loop(0); // start with the first element
$("input").click(function()
{
  clearTimeout(animLoop);
  anim_loop(parseFloat($(this).attr("id")));    
});