Destroying cloned element (can't select first instance)

Question

I am testing some generic function building and came across this problem - cannot select first cloned element using jQuery syntax. Is it due to eventListeners not being present in the first please? If so, how to add an eventListener to something that is not present in DOM until cloned?

var cloneAndAppendCounter = 0;

function cloneAndAppend (what, target, maxClones) { 
  var id = what.attr('id');
  var clone = what.clone(true);
  var target = target;
  
  if ( cloneAndAppendCounter < maxClones ) {
    clone.attr('id', id + cloneAndAppendCounter); 
    clone.appendTo(target);
    cloneAndAppendCounter++;
  }
};

function destroyClonedElement (originalElement, when) {
  var originalElementId = originalElement.attr('id');
  var clonedElementId = originalElementId + cloneAndAppendCounter;
  var cloned = $('#' + clonedElementId);

  
  console.log('clonedElementId:', clonedElementId);
  console.log(cloned);

  if ( (cloned) && cloneAndAppendCounter > 0 ) {
    cloned.remove();
    cloneAndAppendCounter--;
    console.log('counter: ', cloneAndAppendCounter);
  };

};


$('.clone-button').click(function () {
  cloneAndAppend($('#app'), $('.container'), 4);

});


$('.destroy-button').click(function () {
  destroyClonedElement($('#app'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="clone-button">clone button</button>
<button class="destroy-button">destroy button</button>
<div class="container">
  <div id="app">test</div>
</div>

Answer 1

No, the problem is not in elements being bound or not bound to listeners. The problem is in this line

    cloneAndAppendCounter++;

or more precisely in the place you had put it, because it plays dramatic role as turned out.

So the thing is tha you append an element with a specific id to target then you increase the counter. So by the time you are pushing remove button the counter is more than the number of appended children by one and so that is why the first click has not effect - because it goes in vain.

Here is a working script(I rearranged problematic line to the place it best fits in and besides that changed initial counters):

var cloneAndAppendCounter = -1;

function cloneAndAppend (what, target, maxClones) { 
  var id = what.attr('id');
  var clone = what.clone(true);
  var target = target;
  
  if ( cloneAndAppendCounter < maxClones ) {
    cloneAndAppendCounter++;
    clone.attr('id', id + cloneAndAppendCounter); 
    clone.appendTo(target);
//    console.log('counter: ', cloneAndAppendCounter);
  }
 
};

function destroyClonedElement (originalElement, when) {
  var originalElementId = originalElement.attr('id');
  var clonedElementId = originalElementId + cloneAndAppendCounter;
  var cloned =  $('#' + clonedElementId);

  
//  console.log('clonedElementId:', clonedElementId);
//  console.log(cloned);

  if ( cloned && cloneAndAppendCounter > -1 ) {
    cloned.remove();
    cloneAndAppendCounter--;
//    console.log('counter: ', cloneAndAppendCounter);
  };

};


$('.clone-button').click(function () {
  cloneAndAppend($('#app'), $('.container'), 4);
});


$(document).on('click','.destroy-button', function (e) {
  e.preventDefault();
  destroyClonedElement($('#app'))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="clone-button">clone button</button>
<button class="destroy-button">destroy button</button>
<div class="container">
  <div id="app">test</div>
</div>