My html:

<p id="book_no"><select name="books" id="bno" onclick="get_books()">
</select>&ensp;<i class="fa fa-solid fa-plus" style="cursor: pointer;" onclick="add_book()"></i></p>

My javascript:

function get_books(){
    let $select = $("#bno");
    return $.ajax({
        url: '/edit_qrtr/server.php',
        type: 'POST',
        data:{"input": "get_books"},
        dataType: 'json',
        success: function(response) {
            let selectedValue = $select.val();
            let html = response.filter((e, i, a) => a.indexOf(e) === i).map(item => `<option value="${item}">${item}</option>`);
            $select.html(html).val(selectedValue);
        },
        complete: function() {}
    });
}

function add_book(){
    get_books().done(() =>{
        let $select = $("#bno");
        let b = prompt("Please enter the new book no");
        if(b!=null)
            $select.append(`<option value="${b}">${b}</option>`);       
    })
}

The issue is that, when I try to add a new book, it doesn't get inserted into the list. How do I fix this issue? Please help me.

EDIT: In the function get_books(), I am fetching all the book nos that are already there in my sql table. In the second function add_book(), I am trying to add a new book no, which is not present in the already-fetched list of books.