gistfile1.js

<div class="compare" data-compare-product>
  <input type="text" class="compare__product-search" />
  <div class="compare__suggestions"></div>
  <div class="compare__details"></div>
</div>

/////
for (const el of document.querySelectorAll('[data-compare-product]')) {
  compareProduct.init(el);
}
////
export default {
  init(el) {
    el.querySelector('.compare__product-search').addEventListener('keyup', async (e) => {

      const suggestionContainer = el.querySelector('.compare__suggestions');

      suggestionContainer.innerHTML += '<span class="selection">Product 1</span>';

    });


    el.querySelector('.selection').addEventListener('click', async (e) => {
    
      const detailsContainer = el.querySelector('.compare__details');
      detailsContainer.innerHTML = 'Updated text';

    });
  },
}