Q:

How to make advanced tab on JS

I want to make an advanced tab, but I can not do it
I have 15 elements that we get from the page (button).
There are also 5 elements that we get from the page (span).
I want that when clicking on each element (button), the "active" class is assigned to it, but with one condition: that when you click on a random element from this array, the "active" class is assigned to it, after that, if you click on another element (random), then the "active" class was also assigned to it, but if you click on the third, random again element, then the "active" class was removed from the first pressed button (button), but the second and third ones remained and so on. There is a condition that if we pressed 1 or 2 or 3 (button), then the class "active-span" is assigned to the first element (span), if we pressed for example 2 and 6 (button), then the class "active-span" is assigned 1 and 2 elements (span), but if we pressed 2 and 6 (button) and we press 8 (button), then for 1 element (span) we delete the class "active-span", and assign "active-span" to 3 elements (span).
Tell me the logic of the solution.
My code: https://codepen.io/MrMarten/pen/eYmLEPv

let elem = document.querySelectorAll('button');
let elemActive = [];

let span = document.querySelectorAll('span');
let spanActive = [];

for (let x of elem) {
  x.addEventListener('click', handlerChange)
}

function handlerChange(event) {

  if (!this.classList.contains('active')) {

    this.classList.add('active');

    if (elemActive.push(this) == 3) {

      elemActive[0].classList.remove('active');
      elemActive.shift();

    }
  }
};
.active {
  color: red;
}

.active-span {
  color: red;
  border-color: red;
}

span {
  margin: 5px 10px;
  border: 1px solid;
  padding: 5px;
}

.d-flex {
  display: flex;
  border: none;
}
<div class="d-flex">
  <span>1-3</span>
  <span>4-6</span>
  <span>7-9</span>
  <span>10-12</span>
  <span>13-15</span>
</div>

<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>10</button>
<button>11</button>
<button>12</button>
<button>13</button>
<button>14</button>
<button>15</button>

A:

As the "activation" setting of the span-elements is functionally dependent on the active status of the buttons, you could just iterate those spans and the buttons to see if there is an active button in the range specified by the span, and set the CSS class accordingly.
Here is how your function could be extended to achieve that. 
Note that I have renamed some of your variables to a plural form, which I prefer when they represent collections/arrays:

let elems = document.querySelectorAll('button');
let elemsActive = [];

let spans = document.querySelectorAll('span');
let spansActive = [];

for (let elem of elems) {
    elem.addEventListener('click', handlerChange)
}

function handlerChange(event) {
    if (!this.classList.contains('active')) {
        this.classList.add('active');
        if (elemsActive.push(this) == 3) {
            elemsActive.shift().classList.remove('active');
        }
        spansActive.length = 0; // clear
        for (let span of spans) {
            let [low, high] = span.textContent.split("-").map(Number);
            let active = Array.from(elemsActive, elem => +elem.textContent)
                              .some(n => n >= low && n <= high);
            span.classList.toggle('active', active);
            if (active) spansActive.push(span); // (if you still need this array?)
        }
    }
};
.active {
  color: red;
}

.active-span {
  color: red;
  border-color: red;
}

span {
  margin: 5px 10px;
  border: 1px solid;
  padding: 5px;
}

.d-flex {
  display: flex;
  border: none;
}
<div class="d-flex">
  <span>1-3</span>
  <span>4-6</span>
  <span>7-9</span>
  <span>10-12</span>
  <span>13-15</span>
</div>

<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>10</button>
<button>11</button>
<button>12</button>
<button>13</button>
<button>14</button>
<button>15</button>

