i am trying to delete the prepended on click delete button but even not working alert here after click on it

Question

$('#toAddNewNumber').on('click', function(e) {
  e.preventDefault();
  $(this).parent('div').prepend('<div><input type="number" style="width: 80%;" class="mobile addCss"  placeholder="Enter mobile number" name="mobile[]"><button class="toRemoveAddedNumber" style="width: 100px; background-color: red; border-radius: 5px; margin-left: 3px;">Delete</button></div>');
});

// to delete new number field
$('.toRemoveAddedNumber').on('click', function(e) {
  e.preventDefault();
  alert('hi');
});

the above code is to add some element on click event which is working properly but when i'm clicking on .toRemoveAddedNumber class (used as delele button shown in attached file) alert is not working as shown in lower code.

file before element addition and after addition has been attached.

i am trying to run on click event in lower code to execute alert.