<p><b>Products</b></p>
<ul class="products">
  <li class="product">01</li>
  <li class="product">02</li>
  <li class="product">03</li>
  <li class="product">04</li>
  <li class="product">05</li>
  <li class="product added">06</li>
</ul>

<p><b>Wishlist</b></p>
<div class="box">
  <li class="product">06</li>
</div>

.products .product::after {
  content: ' +';
}

.products .product.added::after {
  content: '';
}

.box .product::after {
  content: ' -';
}

const products = document.querySelector('.products');
const box = document.querySelector('.box');

products.addEventListener('click', function(evt) {
  const product = evt.target;
  if (evt.target.matches('.product:not(.added)')) {
    const clone = product.cloneNode(true);
    box.appendChild(clone);
    product.classList.add('added');
  }
});