jQuery Array Element not Removing when Clicked

Question

I'm trying to build a simple demo in jQuery of creating new elements and being able to delete them. I'm not sure why, but I cannot get this to work in jQuery. I can in JavaScript and have built a working demo here: https://codepen.io/anon/pen/omrdmm

It seems that the code that doesn't work is this part:

/* NOT WORKING */
    $.each(removes, function(el) {
      el.on("click", function(){
        let removedId = $(this).parent().attr('data-id');
        $(this).parent().remove(); console.log('removed id ' + removedId);
        updateElements();
      });
    }); 

Codepen URL: https://codepen.io/anon/pen/OdeZrV

I'm not massively experienced in jQuery and don't know why the above isn't working. It should just iterate through each array item (or .remove class) and add an event listener that, when clicked, removes its parent (row).

Can someone explain what specifically is going wrong here and demonstrate how to fix it? Any best coding practices would be much appreciated. Thanks for any help here.

Here's the complete code in jQuery:

// defaults
var id = 1, objects = [], removes = $(".remove");
updateElements();

function createEntry() {
  id++;

  // create new element, append to #container & create new object
  var container = $('#container'),
      newEntry = $('<div/>'),
      title = 'title text here',
      description = 'description text here',
      remove = 'remove',
      dataId = id,
      obj = new Entry(title, description, remove);
  newEntry.addClass("entry");
  newEntry.html('<span class="title">' + title + '</span><span class="description">' + description + '</span><span class="remove">' + remove + '</span>');
  container.append(newEntry);
  newEntry.attr('data-id', id);

  updateElements();

  // constructor & push into array
  function Entry(title, description, remove) {
    this.title = title;
    this.description = description;
    this.remove = remove;
    this.id = id;

    objects.push(this);
  }

  // tests
  console.log('JSON.stringify(objects[0]): ' + JSON.stringify(objects[0]));
  console.log('obj.title: ' + obj.title);
  console.log('JSON.stringify(obj): ' + JSON.stringify(obj));
  console.log('obj.id: ' + obj.id);
}

function updateElements() {
  removes = $(".remove");
  listenForRemoves();

  function listenForRemoves() {
    
    /* NOT WORKING */
    $.each(removes, function(el) {
      el.on("click", function(){
        let removedId = $(this).parent().attr('data-id');
        $(this).parent().remove(); console.log('removed id ' + removedId);
        updateElements();
      });
    });    
  }
}

button { display: block }
.entry {
 width: 100%;
 display: block;
 padding: 10px;
 border: 1px solid #f5f5f5;
}
span {
  display: block;
  width: 100%;
}
section { background: lightgreen }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='btn' onclick='createEntry()'>Create</button>
<section id='container'>
 <div class='entry' data-id='1'>
  <span class='title'>title text here</span>
  <span class='description'>description text here</span>
  <span class='remove'>remove</span>
 </div>
</section>