First i have a method that generates a HTML and fetches some information from the database
public function readNotes()
{
    $stmt = parent::connect()->prepare($this->getNotesQuery());
    $stmt->execute();
    if ($stmt->rowCount() == 0) {
        echo "<h2>No notes found! Start by adding one!</h2>";
    } else {
        while ($note = $stmt->fetch()) {
            echo "<div class='card' style='width: 18rem;'>
            <div class='card-body text-dark'>
                <h5 class='card-title'>{$note['note_title']}</h5>
                <p class='card-text'>{$note['note']}</p>
                <div class='col'>
                <button type='button' class='btn btn-danger bt' id = '{$note['id']}'>Delete</button>
                </div>
            </div>
        </div>";
        }
    }
}
Then into another PHP file i simply call that information with the following Ajax:
$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "./includes/read-note-inc.php",
        data: {
            id: $("#id").val(),
        },
        success: function(data) {
            $("#myNotes").html(data);
        }
    });
});
This works as it should, now as you can see in the readNotes() method i have a button with a class bt and id that corresponds with the matching id from the database.
Then i have this jQuery code that doesn't seem to work and i don't know why:
$(document).ready(function() {
    $('.bt').click(function() {
        var id = $(this).attr('id');
        alert(id);
    });
});
Now you may ask if i have called jQuery before using, and i have, i also have on the same page used other jQuery code that works, but only this one seems to not work. Also i have no errors in the console whatsoever.
 
    