JSFiddle - React, Tailwind, and code Playground

by Никита Егоров

HTML

<div class="wrapper">
    <div class="container-btn__left" data-value="2">
        <button>One</button>
        <button>Second</button>
        <button>Third</button>
    </div>
    <div class="container-btn__right" data-value="1">
        <button>One</button>
        <button>Second</button>
        <button>Third</button>
    </div>
</div>


<div class="link">img/first/one/b1-1.png</div>

CSS

.container-btn__left {
  padding: 20px;
  border: 2px solid #333;
}
.container-btn__right {
  padding: 20px;
  border: 2px solid #333;
}

.link {
  margin-top: 20px;
  font-size: 24px;
  font-family: sans-serif;
}

JavaScript

const link = document.querySelector('.link');

document.querySelector('.wrapper').onclick = event => {
  const btn = event.target.closest('button');
  
  if (btn) {
    const text = link.innerHTML.split('/');
    text[text.length - 1 - +btn.parentNode.dataset.value] = btn.innerHTML.toLowerCase();
      
    link.innerHTML = text.join('/');
  }
}