Why only one value of the tittle after clicking dynamic button

I work with Google Books Api and display card with books and creating them dynamic in js with button like this:

$.ajax({
            url: "https://www.googleapis.com/books/v1/volumes?q=subject:fiction",
            dataType: "json",
    
            success: function(data) {
                for (i = 0; i< 20; i++){
                    const content = `
                    <div class="card my-3" style="width: 18rem;">
                    <img class="mx-auto card-img-top book-cover imgs thumbnail" src="${data.items[i].volumeInfo.imageLinks.thumbnail}" style="width:170px; height:230px;" alt="">
                    <div class="card-body" id="results">
                        <h5 class="card-title" style="font-weight:bold">${data.items[i].volumeInfo.title}</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <div class="d-flex">
                        <div class="dropdown " style="margin-right:8px;">
                            <button class="btn btn-dark dropdown-toggle" 'type="button" style="height:2.5rem;" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Add
                            </button>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                            <button class="dropdown-item iWantToRead" id = "iWantToRead" value='${data.items[i].volumeInfo.title}' type="button">I want to read</button>
                            <button class="dropdown-item" type="button">Read</button>
                            <button class="dropdown-item" type="button">I want to buy</button>
                            </div>
                        </div>                        
                        <button type="button" name="add_review" id="add_review" class="btn btn-dark">Review</button>
                        <a href="${data.items[i].accessInfo.webReaderLink}" class="btn mx-auto btn-dark" style="height:2.5rem;">Read</a>
                        </div>
                    </div> `;
                    card.innerHTML += content;

and I went to attach tittle of the book to button and depending what btn user click the tittle will display. But I am having problem that I am only getting tittle of first book no matter what btn I click

$('.iWantToRead').unbind().click(function(){
                        var button = document.getElementById('iWantToRead');
                        var tittle = button.getAttribute('value');
                        var thumbnail = button.getAttribute('data-value');
                        $.ajax({
                            type: "POST",
                            url: "bookshelf.php",
                            data: 
                            {
                                action:'iWantToRead',
                                tittle: tittle,
                                thumbnail: thumbnail
                            },
                            success: function(html){    
                                console.log(html);
                                
                            }
                        })
                    });