JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box1" class="box" style="background-color:#0000FF">
     <h3>This is a heading in a div element</h3>

    <p>This is some text in a div element.</p>
</div>
<div id="box2" class="box" style="background-color:red">
     <h3>This is a heading in a div element</h3>

    <p>This is some text in a div element.</p>
</div>
<div id="box3" class="box" style="background-color:green">
     <h3>This is a heading in a div element</h3>

    <p>This is some text in a div element.</p>
</div>

<input type="button" name="btn1" id="btn1" value="btn1">
<input type="button" name="btn2" id="btn2" value="btn2">

JavaScript

var currentIndex = 0;
$(".box:not(:eq("+ currentIndex +"))").hide();

var totalDiv = $(".box").length;

setInterval(function(){
     currentIndex = (currentIndex + 1) % totalDiv;
    
    $(".box").hide();
     $(".box").eq(currentIndex).show();
    
},3000);