How to toggle classes in three element simultaneously

Question

Have three entry points.Video block (id="testimonials-item") block with quotes (id="testimonials-item-container") and block dots (id="testimonials-nav").

I need that when I click on the orange dots the is-active class changes in three places (the video block quote block and also the dots itself). A simple slide but with three entry points.

I hide everything with the class is-active and by default, all the elements display: none .This has all the elements hidden except one for each block except.The dot's isn't hidden they have only one button active.

I wrote the JS code but here at the click it remains active too. That is, the classes do not change the way they add for each block additional class.

Open the code in full screen because otherwise Bootstrap will not show the video block that limit as I applied for sm resolutions

var header = document.getElementById("testimonials-nav");
var btns = header.getElementsByClassName("testimonials-nav-item");
for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function () {
        var current = document.getElementsByClassName("is-active");
        current[0].className = current[0].className.replace(" is-active", "");
        this.className += " is-active";
    });
}

.testimonials-item::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: transparent;
    transition: background ease-out 0.5s, z-index 0.5s;
    background-color: rgba(255, 109, 58, 0.8);
}
.testimonials-item:hover::after {
    background-color: transparent;
}

.clients {
    display: none;
    height: 100%;
    width: 100%;
}
.is-active {
    display: block !important;
}
.testimonials-item-container {
    padding: 120px;
    margin: 0 auto;
    text-align: center;
}
.testimonial-quote {
    display: none;
    transform: translateY(0);
    opacity: 1;
    transition: opacity .75s cubic-bezier(0.19, 1, 0.22, 1) 0.15s,
    transform .75s cubic-bezier(0.19, 1, 0.22, 1) 0.15s;
}
.testimonial-quote-text {
    color: #FF6D3A;
    font-size: 48px;
    margin: 50px auto;
}
.testimonial-quote-source {
    color: rgba(255, 109, 58, 0.5);
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.testimonials-nav {
    /* transform: translateX(-50%);
    position: absolute;
    z-index: 6;
    bottom: 60px;
    left: 50%; */
    margin-top: 5%;
    display: flex;
    margin: 0 auto;
    flex-basis: 100%;
    justify-content: center;
}
.testimonials-nav-item {
    width: 11px;
    height: 11px;
    display: inline-block;
    margin: 0 10px;
    background-color: rgba(54, 59, 62, 0.4);
    border-radius: 100%;
    cursor: pointer;
    transition: background-color .75s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow .75s cubic-bezier(0.19, 1, 0.22, 1);
}
.testimonials-nav-item:not(.is-active):hover{
    background-color: rgba(255, 109, 58, 0.4);
}
.testimonials-nav-item.is-active {
    background-color: #FF6D3A;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container-fluid">
        <div class="row">
            
                <div class="d-xs-none d-sm-none d-md-none d-lg-block d-xl-block col-lg-6 col-xl-6 no-padding">
                    <div  id="testimonials-item" class="testimonials-item">
                        <video autoplay loop class="clients" muted>
                            <source src="//cdn2.editmysite.com/videos/landing-pages/global/home-weebly4/v2/testimonials/montainer.mp4" type="video/mp4" />
                        </video>
                        <video autoplay loop class="clients is-active" muted>
                            <source src="//cdn2.editmysite.com/videos/landing-pages/global/home-weebly4/v2/testimonials/olive-aloe.mp4" type="video/mp4" />
                        </video>
                        <video autoplay loop class="clients" muted>
                            <source src="//cdn2.editmysite.com/videos/landing-pages/global/home-weebly4/v2/testimonials/alibi.mp4" type="video/mp4" />
                        </video>
                    </div>
                    
                </div>
                <div class="col col-lg-6 col-xl-6">
                    <div id="testimonials-item-container" class="testimonials-item-container">
                        <h3 class="testimonials-title">Join <strong> millions</strong> of people who are doing their
                             favorite things on Bulbasaur</h3>
                        <div class="testimonial-quote is-active">
                            <h2 class="testimonial-quote-text">"Thanks to <strong>Bulbasaur</strong>  our customers, trust us"</h2>
                            <h4 class="testimonial-quote-source">&mdash; Patrick</h4>
                        </div>
                        <div class="testimonial-quote">
                            <h2 class="testimonial-quote-text">"Thanks to Bulbasaur our customers, trust us"</h2>
                            <h4 class="testimonial-quote-source">&mdash; Anna</h4>
                        </div>
                        <div class="testimonial-quote">
                            <h2 class="testimonial-quote-text">"Thanks to Bulbasaur our customers, trust us"</h2>
                            <h4 class="testimonial-quote-source">&mdash; Sergio</h4>
                        </div>
                        <nav  id="testimonials-nav" class="testimonials-nav">
                            <a class="testimonials-nav-item" data-stepnav="1" href="#"></a>
                            <a class="testimonials-nav-item is-active" data-stepnav="2" href="#"></a>
                            <a class="testimonials-nav-item" data-stepnav="3" href="#"></a>
                        </nav>
                    </div>
                </div>
            
        </div>
    </div>

Answer 1

Use this :)

var header = document.getElementById("testimonials-nav");
var btns = header.getElementsByClassName("testimonials-nav-item");
for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
        var current = document.querySelector(".testimonials-nav-item.is-active");
        var client = document.querySelector(".clients.is-active");
        var quote = document.querySelector(".testimonial-quote.is-active");
        current.classList.remove("is-active");
        client.classList.remove("is-active");
        quote.classList.remove("is-active");
        addActiveClass(this.getAttribute("data-stepnav"));
        this.className += " is-active";
    });
}

function addActiveClass(index) {
    index = parseInt(index) - 1;
    var quote = document.getElementsByClassName("testimonial-quote");
    var client = document.getElementsByClassName("clients");
    client[index].classList.add("is-active");
    quote[index].classList.add("is-active");
}

Answer 2

You have the class "is-active" in three elements

<video autoplay loop class="clients is-active" muted>
<div class="testimonial-quote is-active">
<a class="testimonials-nav-item is-active" data-stepnav="2" href="#"></a>

When you execute this, you get 3 elements and the orange button is the 3rd one:

var current = document.getElementsByClassName("is-active");

This works: https://jsfiddle.net/cCrul/k45xgd5g/

var current = document.getElementsByClassName("is-active");
current[2].className = current[2].className.replace(" is-active", "");

If you want to iterate and change all the values of an HTMLCollection you need to convert it to an array before. See this: https://jsfiddle.net/cCrul/k45xgd5g/12/

var current = document.getElementsByClassName("is-active");
current = Array.prototype.slice.call(current);
for (var j in current){
    current[j].className = current[j].className.replace(" is-active", "");
}