<div class="container">
  <div class="half">
    <div class="element-list">
      <h1 class="title">Element List 1</h1>
      <a class="button" href="#">Element List 1</a>
      <a class="button" href="#">Element List 2</a>
      <a class="button" href="#">Element List 3</a>
      <a class="button" href="#">Element List 4</a>
      <a class="button" href="#">Element List 5</a>
    </div>

    <div class="element-list">
      <h1 class="title">Element List 2</h1>
      <a class="button" href="#">Element List 1</a>
      <a class="button" href="#">Element List 2</a>
      <a class="button" href="#">Element List 3</a>
      <a class="button" href="#">Element List 4</a>
      <a class="button" href="#">Element List 5</a>
    </div>

    <div class="element-list">
      <h1 class="title">Element List 3</h1>
      <a class="button" href="#">Element List 1</a>
      <a class="button" href="#">Element List 2</a>
      <a class="button" href="#">Element List 3</a>
      <a class="button" href="#">Element List 4</a>
      <a class="button" href="#">Element List 5</a>
    </div>

  </div>
  
  <div class="half display">
     <h2 class="active-list">Active List is: <span class="list-text-field"></span></h2>
     <div class="button-wrap"></div>
  </div>
</div>
.container {
  display: flex;
}

.half {
  flex-basis: 50%;
  padding-left: 15px;
  padding-right: 15px;
}

.element-list {
  margin-bottom: 50px;
}

.element-list h1, 
.button {
  font-family: sans-serif;
}

.element-list h1 {
  margin-top: 25px;
  margin-bottom: 10px;
  font-size: 24px;
}

.button {
  display: inline-block;
  padding: 10px 25px;
  text-decoration: none;
  color: white;
  margin-right: 10px;
  margin-bottom: 10px;
}

.element-list {
  margin-bottom: 50px;
}

.element-list h1,
.button {
  font-family: sans-serif;
}

.element-list h1 {
  margin-bottom: 10px;
  font-size: 24px;
}

.button {
  display: inline-block;
  padding: 10px 25px;
  text-decoration: none;
  color: white;
  margin-right: 10px;
  border: 5px solid transparent;
  
  &:hover {
    border: 5px solid black;
  }
}

.active-button {
  background-color: #27ae60;
  color: white;
  margin-top: 25px;
}


.display h2 {
  margin-top: 25px;
  margin-bottom: 25px;
  font-family: sans-serif;
  font-size: 24px;
}

.element-list:nth-child(1) {
  
  a:nth-child(2) {
    background-color: rgba(blue, 1);
  }

  a:nth-child(3) {
    background-color: rgba(blue, 0.8);
  }

  a:nth-child(4) {
    background-color: rgba(blue, 0.6);
  }

  a:nth-child(5) {
    background-color: rgba(blue, 0.4);
  }

  a:nth-child(6) {
    background-color: rgba(blue, 0.2);
  }
}

.element-list:nth-child(2) {
  a:nth-child(2) {
    background-color: rgba(red, 1);
  }

  a:nth-child(3) {
    background-color: rgba(red, 0.8);
  }

  a:nth-child(4) {
    background-color: rgba(red, 0.6);
  }

  a:nth-child(5) {
    background-color: rgba(red, 0.4);
  }

  a:nth-child(6) {
    background-color: rgba(red, 0.2);
  }
}

.element-list:nth-child(3) {
  a:nth-child(2) {
    background-color: rgba(#cc00ff, 1);
  }

  a:nth-child(3) {
    background-color: rgba(#cc00ff, 0.8);
  }

  a:nth-child(4) {
    background-color: rgba(#cc00ff, 0.6);
  }

  a:nth-child(5) {
    background-color: rgba(#cc00ff, 0.4);
  }

  a:nth-child(6) {
    background-color: rgba(#cc00ff, 0.2);
  }
}
const ee = new EventEmitter();

const elements = [...document.querySelectorAll('.element-list')];
const buttons = [...document.querySelectorAll('.button')];

const getListTitle = (button) => {
 return button.parentElement.querySelector('.title').textContent;
}


const setActiveButton = (activeButton) => {
  const buttonWrap = document.querySelector('.button-wrap');
  // Remove all contents from button field.
  buttonWrap.innerHTML = '';
  
  const clone = activeButton.cloneNode(true);
  clone.setAttribute('style', `background-color: ${window.getComputedStyle(activeButton)['background-color']}`);
  
  buttonWrap.appendChild(clone);
  
  return clone
}

const setActiveList = (activeList) => {
  const textField = document.querySelector('.list-text-field');
  textField.textContent = activeList;
}

buttons.map((button) => {
  button.addEventListener('click', (e)=> {
    ee.emit('active-element-update', {
      el: e.target, 
      list: getListTitle(e.target)
    });
  })
})

ee.on('active-element-update', (button) => {
  setActiveList(button.list);
  setActiveButton(button.el);
});



External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/eventemitter3/3.1.0/index.min.js