I am trying to access the div that I am creating using a variable that gets the local storage keys. The div is being created correctly but when I am trying to append something to that created div it does nothing.

<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>
</body>

    $(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 + '"></div>');
                var div = $('#' + key);
                alert(div);
                div.append("<p class='d-block'>" + key + " => " + value + "</p>");
                // $('.modal-body-basket').append("<button type='button' class='d-block' id=" + key + "> X </button>");
            }

            $('#basket-modal').modal("show");
        });
    })

Image where you can see the created div but nothing inside