(function () {
  var buttons = document.querySelector('#list');
  buttons.onclick = function (e) {
   var clicks = 0;
   clicks++;
   var target = e.target;
   if (target.tagName = 'BUTTON') {

  var counter = target.closest('li').querySelector('.product-item__counter');
  counter.innerHTML = clicks;

  var product = target.closest('li').querySelector('.product-item__title').innerHTML;
  alert(' You have bought a ' + product);
 }
 };
})();

buttons.onclick = function (e) {
    var clicks = 0;
    clicks++;

<div class="container">
    <h1 class="title">List</h1>
    <ul class="list" id="list">
        <li class="list-item">
            <h2 class="list-item__title">Title First</h2>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dolorum exercitationem harum ipsam modi nesciunt
                optio qui quia quidem reiciendis? Alias consectetur dolorem hic nobis optio quam quos sapiente veniam.</p>
            <button id="bt1" class="list-item__click-btn">btn</button>
            <span class="list-item__counter">0</span>
        </li>
                <li class="list-item">
            <h2 class="list-item__title">Title Second</h2>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dolorum exercitationem harum ipsam modi nesciunt
                optio qui quia quidem reiciendis? Alias consectetur dolorem hic nobis optio quam quos sapiente veniam.</p>
            <button id="bt2" class="list-item__click-btn">Btn</button>
            <span class="list-item__counter">0</span>
        </li>
                <li class="list-item">
            <h2 class="list-item__title">Title Third</h2>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dolorum exercitationem harum ipsam modi nesciunt
                optio qui quia quidem reiciendis? Alias consectetur dolorem hic nobis optio quam quos sapiente veniam.</p>
            <button id="bt3" class="list-item__click-btn">btn</button>
            <span class="list-item__counter">0</span>
        </li>
                <li class="list-item">
            <h2 class="list-item__title">Title Fourth</h2>
            <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dolorum exercitationem harum ipsam modi nesciunt
                optio qui quia quidem reiciendis? Alias consectetur dolorem hic nobis optio quam quos sapiente veniam.</p>
            <button id="bt4" class="list-item__click-btn">Btn</button>
            <span class="list-item__counter">0</span>
        </li>




    </ul>
</div>

<script type="text/javascript">
(function () {
var clicks = 0;
  var buttons = document.querySelector('#list');
  buttons.onclick = function (e) {
     clicks = clicks ? localStorage.getItem(e.target.id) : 0;
   clicks++;
   localStorage.setItem(e.target.id,clicks);
    var target = e.target;
    if (target.tagName = 'BUTTON') {

      var counter = target.closest('li').querySelector('.list-item__counter');
      counter.innerHTML = clicks;

      var product = target.closest('li').querySelector('.list-item__title').innerHTML;
      alert(' You have bought a ' + product);
    }
  };
})();
</script>