<div class="selected">
                <div class="selected__inner">
                    <div class="tabs-select">
                        <div class="tabs-select__button">
                            <a href="#plana" data-tab="plana"  class="active">
                                Plan A
                            </a>
                            <a href="#planb" data-tab="planb" class="tabs-select__button">
                                Plan B 
                            </a>
                        </div>
                        
                        <div id="plana" class="b-tab active">
                            Orange tab content
                        </div>
                        <div id="planb" class="b-tab">
                            Green tab content
                        </div>
                    </div>
                </div>
            </div>
        </div>

.selected{
    position: relative;
    margin-left: 13px;
    &__inner{
        .tabs-select{
            &__button{
                display: flex;
                a{
                    display: block;
                    color: #79c79f;
                    font-size: 18px;
                    text-align: center;
                    min-width: 225px;
                    padding: 12px 5px;
                    padding-bottom: 10px;
                    border: 1px solid rgb(121, 199, 159);
                    border-radius: 3px;
                    transition: .3s;
                    &:hover{
                        color: #ffffff;
                        border-radius: 3px;
                        background-color: rgb(70, 95, 204);
                        border: 1px solid transparent;
                    }
                    &:first-child{
                        margin-right: 46px;
                    }
                    &.active{
                        color: #ffffff;
                        border-radius: 3px;
                        background-color: rgb(112, 133, 231);
                        border: 1px solid transparent;
                    }
                }
               
            }
            .b-tab{
                display: none;
                &.active{
                    display: block;
                }
            }
        }
    }
}

function Tabs() {
    let textTabPlan = [];
    let bindAll = function() {
      let menuElements = document.querySelectorAll('[data-tab]');
      for(let i = 0; i < menuElements.length ; i++) {
        textTabPlan.push(menuElements[i].textContent);
        menuElements[i].addEventListener('click', change);
      }
      console.log(textTabPlan);
    }
  
    let clear = function() {
      let menuElements = document.querySelectorAll('[data-tab]');
      for(let i = 0; i < menuElements.length ; i++) {
        menuElements[i].classList.remove('active');
        let id = menuElements[i].getAttribute('data-tab');
        document.getElementById(id).classList.remove('active');
        menuElements[i].textContent = textTabPlan[i];
      }
    }
  
    let change = function(e) {
      clear();
      e.target.classList.add('active');
      e.target.textContent =  e.target.textContent + ' selected'
      let id = e.currentTarget.getAttribute('data-tab');
      document.getElementById(id).classList.add('active');
    }
  
    bindAll();
  }
  
  let connectTabs = new Tabs();