jQuery: alternate switching of classes in several div blocks

I have 2 identical div blocks on the page, inside of which there are several div blocks with different texts. It looks something like this:

<div class="dynamic_titles">
    <div class="dynamic_title active">text 1</div>
    <div class="dynamic_title inactive">text 2</div>
    <div class="dynamic_title inactive">text 3</div>
    <div class="dynamic_title inactive">text 4</div>
    <div class="dynamic_title inactive">text 5</div>
</div>

<div class="dynamic_titles">
    <div class="dynamic_title active">text 6</div>
    <div class="dynamic_title inactive">text 7</div>
    <div class="dynamic_title inactive">text 8</div>
    <div class="dynamic_title inactive">text 9</div>
    <div class="dynamic_title inactive">text 10</div>
</div>

I need to change classes from inactive to active in each dynamic_title block in turn. That is, the next one takes active, and the previous one with active in inactive and so on in a circle.

When I have one dynamic_titles block, everything works fine, but 2 interfere with each other, break. I’m trying not to make 2 functions for each block separately, I want to make one universal one that would be applied to each block separately.

Now I have such a code, but it does not work as expected. It runs once and goes no further. If done without .each, it works, but again not as expected and eventually breaks. What is my mistake?

$('.dynamic_titles').each(function () {

    var index = 1,
        max = $(this).find('.dynamic_title').length;

    function setActiveHeadline() {
        setTimeout(function () {
            $(this).find('.active').removeClass('active').addClass('inactive');

            index++;
            if (index > max) {
                index = 1;
            }

            $(this).find('.dynamic_title:nth-of-type(' + index + ')').addClass('active').removeClass('inactive');

            setActiveHeadline();

        }, 3000);
    }

    setActiveHeadline();

    widthTitle = $(this).find('.dynamic_title.active').width();
    $(this).css({
        'width': widthTitle,
    });

    function setWidthHeadlines() {
        setTimeout(function () {
            widthTitle = $(this).find('.dynamic_title.active').width();

            $(this).css({
                'width': widthTitle,
            });

            setWidthHeadlines();

        }, 3000);
    }
    setWidthHeadlines();
})

Thank you for your help!

>Solution :

I think you could simplify this into one function that uses setInterval, please see the following snippet:

$(function(){
    //use setInterval to continue the changes
    setInterval(() => {
        //iterate the blocks
        $('div.dynamic_titles').each(function() {
            //get the children
            const $children = $(this).find('div.dynamic_title');
            //get the number of children
            const numofchildren = $children.length;
            //index for switching active in children
            let activeindex = 0;
            //iterate children to find the active one
            $children.each(function(i, el) {
                 //if active, remove active and add inactive classNames
                 //store the index
                 //break the each loop
                 if($(el).hasClass('active')){
                    $(el).removeClass('active').addClass('inactive');
                    activeindex = i + 1;
                    return false;
                 }
            });
            
            //if index has reached the last child, reset to zero
            if(activeindex > numofchildren - 1){
               activeindex = 0;
            }
            //set the next child to active and remove inactive className
            $children[activeindex].classList.add('active');
            $children[activeindex].classList.remove('inactive');
        });
    }, 3000);
})

.active {
   color:green;
}

.inactive {
   color:grey;
}

<div class="dynamic_titles">
    <div class="dynamic_title active">text 1</div>
    <div class="dynamic_title inactive">text 2</div>
    <div class="dynamic_title inactive">text 3</div>
    <div class="dynamic_title inactive">text 4</div>
    <div class="dynamic_title inactive">text 5</div>
</div>

<div class="dynamic_titles">
    <div class="dynamic_title active">text 6</div>
    <div class="dynamic_title inactive">text 7</div>
    <div class="dynamic_title inactive">text 8</div>
    <div class="dynamic_title inactive">text 9</div>
    <div class="dynamic_title inactive">text 10</div>
</div>
<script
  src="https://code.jquery.com/jquery-3.6.1.js"
  integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
  crossorigin="anonymous"></script>