function setupEventDelegation(parentElementId, selector, eventType, callback) {
  const parentElement = document.getElementById(parentElementId);
  if (!parentElement) {
    console.error(`Parent element with ID '${parentElementId}' not found.`);
    return;
  }

  parentElement.addEventListener(eventType, function(event) {
    const target = event.target;
    if (target.matches(selector)) {
      callback(event, target);
    }
  });
}

// Example usage:
// <ul id="myList">
//   <li>Item 1</li>
//   <li class="clickable-item">Item 2</li>
//   <li>Item 3</li>
// </ul>
// <button id="addMore">Add More Items</button>

setupEventDelegation('myList', '.clickable-item', 'click', (event, element) => {
  console.log(`Clicked item with text: ${element.textContent}`);
  element.style.color = 'blue';
});

document.getElementById('addMore').addEventListener('click', () => {
  const ul = document.getElementById('myList');
  const newItem = document.createElement('li');
  newItem.textContent = `New Item ${ul.children.length + 1}`;
  if (ul.children.length % 2 === 0) {
    newItem.classList.add('clickable-item'); // Dynamically added item is also clickable
  }
  ul.appendChild(newItem);
});