Selecionar no máximo dois botões

Front-end JavaScript
#1

Boa tarde pessoal!

Estou com uma dúvida, teria como selecionar dois botões ?

exemplo: Tenho uma div com 5 botões, porém só posso selecionar dois, quando eu selecionar os dois botões o nome contido nos botões terá que salvar em uma variável para caso eu click em um terceiro botão, muda o primeiro botão clicado para o que eu cliquei agora e assim por diante, como se fosse múltipla seleção de checkbox em que só pode selecionar até dois itens.

Botão A, Botão B, Botão C, Botão D, Botão E.

cliquei nos botões A e C e o nome deles salvaram em uma variável.
agora cliquei no botão D, e o botão A sera substituído pelo ‘D’

#2

Noite. Tudo bom?

Da uma olhada se esse exemplo ajuda:

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>To select two button</title>

  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="menu.css">
  <link rel="stylesheet" href="button.css">
</head>
<body>
  <nav class="wrap-menu">
    <ul class="menu">
      <li class="menu-item">
        <button class="button" data-position="first">First</button>
      </li>

      <li class="menu-item">
        <button class="button" data-position="second">Second</button>
      </li>

      <li class="menu-item">
        <button class="button" data-position="third">Third</button>
      </li>

      <li class="menu-item">
        <button class="button" data-position="fourth">Fourth</button>
      </li>

      <li class="menu-item">
        <button class="button" data-position="last">Last</button>
      </li>
    </ul>
  </nav>

  <script src="button.js"></script>
</body>
</html>

CSS (reset.css)

* {
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
}

ul, ol, li {
  list-style: none;
}

body {
  font-family: Arial, sans-serif;
  font-size: 20px;
}

button {
  font-size: inherit;
}

CSS (menu.css)

.menu {
  text-align: center;
  padding-top: 1em;
}
.menu-item {
  display: inline-block;
}

CSS (button.css)

.button {
  background-color: rgba(209, 213, 216, .8);
  color: #FFF;
  padding: .3em .5em;
  cursor: pointer;

  transition: background-color .2s linear;
}
.button.isActive {
  background-color: rgba(147, 101, 184, .8);
  cursor: auto;
}
.button:hover {
  background-color: rgba(147, 101, 184, 1);
}

JavaScript (button.js)

(function () {
  'use strict';

  var $menu = document.querySelector('.menu');
  var counter = 0;

  var activeElements = [];

  $menu.addEventListener('click', function (event) {
    var $this = event.target;

    if ($this.classList.contains('button') && activeElements.length == 2) {
      activeElements.shift().classList.remove('isActive');
    };
    activeElements.push($this);

    activeElements.forEach(function ($element) {
      $element.classList.add('isActive');
    });
  });
})();

Se tiver qualquer dúvida sobre o código só falar. :slight_smile: