Jquery on click not working after creating the div

Question

I have created a div with jquery where I am inserting a div that contains a <p> tag with a tag. The div the button and the p tags are correctly seen but when I want to click the button it does nothing, I am trying to print a message in the console but nothing seen so far.

I have tried to put the jquery code for the button in a different <script> tag

<div class="modal" id="basket-modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Basket items:</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Pay</button>
        </div>
      </div>
    </div>
  </div>

<script>
    $(document).ready(function(){
        $('#addToCart').click(function(){
            $('.modal-body-basket').empty();

            for(var i = 0; i < localStorage.length; i++){
                var key = localStorage.key(i);
                var value = localStorage.getItem(key);
                $('.modal-body').append('<div id=' + key + '><p class="delete-parent d-block">' + key + ' => ' + 
                value + '</p><button class="delete-button" id=' + key + ' type="button">X</button></div>');
                // $('.modal-body-basket').append("<button type='button' class='d-block' id=" + key + "> X </button>");
            }

            $('#basket-modal').modal("show");
        });
        $('.delete-button').click(function(){
            console.log('aaa');
        });
    })
</script>