Mi 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>

Mi 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>`); }) }

El problema es que, cuando intento agregar un nuevo libro, no se inserta en la lista. ¿Cómo soluciono este problema? Por favor, ayúdame.

EDITAR: En la función get_books() , estoy buscando todos los números de libros que ya están en mi tabla sql. En la segunda función add_book() , estoy tratando de agregar un nuevo número de libro, que no está presente en la lista de libros ya obtenida.