How do I move 1 object in an array to another array in javascript and then show both in a listview ( jquery )

So for a school assignment I need to write a basic mobile web application, using jquery and javascript. I need to make a page where you can add a title and author of a book and add it to a list using local storage. So far so good but I want to make 2 lists, one for books to read and one for read books. Now I made the listview with a split icon so when it's clicked that book should move to the other list. That listview contains also a split icon which should remove the book in it's whole.

The adding part is working and the added books are displayed in the listview but I can't seem to get the button working to change the list the book is in. Please help me I'm loosing my mind. Here is my html and javascript code:

<!-- OVERVIEW -->
    <section id="overview" data-role="page" data-theme="b">
        <!-- CONTENT -->
        <div class="ui-content">
            <div>
            <a href="#add" data-role="button" data-theme="b">Add a new book</a>
                <h1>Books to read</h1>
                </div>
            <ul id="booksToRead" data-role="listview" data-split-icon="check" data-theme="b" data-split-theme="b" data-inset="true"></ul>

            <h1>Read books</h1>
            <ul id="readBooks" data-role="listview" data-split-icon="delete" data-theme="b" data-split-theme="b" data-inset="true"></ul>
        </div>
    </section>

And the javascript code

function add() {
// Retrieve the entered form data
var title = $('[name="bookTitle"]').val();
var author = $('[name="bookAuthor"]').val();

var book = {title:title, author:author};

// Fetch the existing books to read
var booksToRead = getObjects("booksToRead");

// Push the new item into the existing list
booksToRead.push(book);

// Store the new list
saveObjects(booksToRead, "booksToRead");

//reset textfields
$('[name="bookTitle"]').val('');
$('[name="bookAuthor"]').val('');

// Load the page with all the books
window.location.href = "#overview";

}

function getObjects(name) {
// See if objects are inside localStorage
if (localStorage.getItem(name)) {
    // If yes, then load the objects
    var objects = JSON.parse(localStorage.getItem(name));
} else {
    // Make a new array of objects
    var objects = new Array();
}
return objects;
}

function saveObjects(objects, name) {

// Save the list into localStorage
localStorage.setItem(name, JSON.stringify(objects));
}

function read(dit){
var readBooks = getObjects("readBooks");
var booksToRead = getObjects("booksToRead");
var book = booksToRead[dit];

// Push the new item into the existing list
readBooks.push(book);

// Store the new list
saveObjects(readBooks, "readBooks");

//Delete from the old list
deleteme(dit, "booksToRead");

//Reload page
window.location.reload();
}

function deleteme(dit, listName) {
// Fetch existing objects
var objects = getObjects(listName);

// Delete given object from list
objects.splice(dit, 1);

// Save list
saveObjects(objects, listName);

//Reload page
window.location.reload();
}

function loadPage() {
// Fetch the existing objects
var booksToRead = getObjects("booksToRead");
var readBooks = getObjects("readBooks");

// Clear the lists
$('#booksToRead').find('li').remove();
$('#readBooks').find('li').remove();

// Add every object to the objects list
$.each(booksToRead, function(index, item) {
    var title = item.title;
    var author = item.author;
    $('#booksToRead').append('<li><a>' + title + ' - ' + author + '</a><a         class="read" onclick="read(' + booksToRead.index + ')" data-transition="none"></a></li>');
});
$.each(readBooks, function(index, item) {
    var title = item.title;
    var author = item.author;
    var listName ="readBooks";
    $('#readBooks').append('<li><a>' + title + ' - ' + author + '</a><a class="delete" onclick="delete(' + readBooks.index + ', ' + listName + ')" data-transition="none"></a></li>');
});

$('#booksToRead').listview();
$('#booksToRead').listview("refresh");
$('#readBooks').listview();
$('#readBooks').listview("refresh");
}

$(document).on('pagebeforeshow', '#overview', function(event) {
loadPage();
});