.addEventListener() not working to an element

Question

So I'm new to javascript and I am trying to make a basic appointment sort of app.

So my project contains 2 phases: 1 is to add an entry and 2 is to remove an entry

Everything is working fine till phase 1, but I can't add the event listener to initiate phase 2

Here's my code:

const list = document.getElementById('app-list');
const form = document.querySelector('form');

form.addEventListener('submit', formSubmit);

function formSubmit(e) {
  e.preventDefault();
  let name = document.getElementById('name').value;
  let date = document.getElementById('date').value;
  // Now that we have the data Submitted, let's make the element!
  let entry = document.createElement("tr");
  entry.innerHTML = `<td>${name}</td><td>${date}</td><td><div class="red-box"><h1>X</h1></div>`;
  list.appendChild(entry);
}
var removebtn = document.getElementsByClassName('red-box');

for (i = 0; i < removebtn.length; i++) {
  removebtn[i].addEventListener('click', removeEntry, false);
}

// Adding Event listner to the removeBTN
function removeEntry(e) {
  console.log('hello World');
}

<section class="form-book">
  <form>
    <div class="input">
      <label for="name">Appointment Name</label><br>
      <input id="name" type="text" name="name" placeholder="Appointment name.." required>
    </div>
    <div class="input">
      <lable for="date">Appointment Date</lable><br>
      <input id="date" type="date" name="date" placeholder="Appointment Date.." required>
    </div>
    <div class="input">
      <input type='submit' value="add">
    </div>
  </form>
</section>
<section class="bookings">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Date</th>
        <th></th>
      </tr>
    </thead>
    <tbody id="app-list">
    </tbody>
  </table>
</section>