<ul class="main-ul">
  <li><h3>Main</h3></li>
</ul>
<ul class="ul">
  <li><h3>Ul</h3></li>
</ul>

<div class="wrapper">
  <input class="input" type="text">
  <button class="button">Создать</button>
</div>

<script type="text/html" id="tmpl-1">
  <div class="wrap">
    <button class="btn"></button>
    <p></p>
  </div>
</script>
.wrap {
  min-width: 400px;
  min-height: 100px;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
   align-items: center;
}

p {
  max-width: 200px;
}

.btn {
  width: 40px;
  height: 40px;
  border: 2px solid #4DD599;
  background: transparent;
  border-radius: 50%;
  margin-right: 20px;
  cursor: pointer;
}

.btn--active {
  background: red;
}
const input = document.querySelector('.input');
const button = document.querySelector('.button');
const ul = document.querySelector('.ul');
const mainUl = document.querySelector('.main-ul');

const tmpl = document.getElementById('tmpl-1').innerHTML;

const makeEl = (txt, eventId) => {
  const item = document.createElement('li');
  item.innerHTML = tmpl;
  item.querySelector('p').textContent = txt;
  item.dataset.eventId = eventId;
  
  document.addEventListener('btnClick', (e) => {
    if (e.detail === eventId) {
      item.querySelector('.btn').classList.toggle('btn--active');
    }
  });
  
  return item;
}

document.addEventListener('click', (e) => {
  if (! e.target.classList.contains('btn')) return;
  
  const eventId = e.target.parentNode.parentNode.dataset['eventId'];
  
  // custom event
  const event = new CustomEvent('btnClick', {detail: eventId});
  document.dispatchEvent(event);
});

button.addEventListener('click', () => {
  const eventId = Math.random().toString(36).substring(7);
 
  ul.appendChild(makeEl(input.value, eventId));
  mainUl.appendChild(makeEl(input.value, eventId));
})



External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.