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

so school assignment need write basic mobile web application, using jquery , javascript. need make page can add title , author of book , add list using local storage. far want make 2 lists, 1 books read , 1 read books. made listview split icon when it's clicked book should move other list. listview contains split icon should remove book in it's whole.

the adding part working , added books displayed in listview can't seem button working change list book in. please me i'm loosing mind. here html , 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 new book</a>                 <h1>books 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 javascript code

function add() {     // retrieve entered form data     var title = $('[name="booktitle"]').val();     var author = $('[name="bookauthor"]').val();      var book = {title:title, author:author};      // fetch existing books read     var bookstoread = getobjects("bookstoread");      // push new item existing list     bookstoread.push(book);      // store new list     saveobjects(bookstoread, "bookstoread");      //reset textfields     $('[name="booktitle"]').val('');     $('[name="bookauthor"]').val('');      // load page books     window.location.href = "#overview";  }  function getobjects(name) {     // see if objects inside localstorage     if (localstorage.getitem(name)) {         // if yes, load objects         var objects = json.parse(localstorage.getitem(name));     } else {         // make new array of objects         var objects = new array();     }     return objects; }  function saveobjects(objects, name) {      // save list localstorage     localstorage.setitem(name, json.stringify(objects)); }  function read(dit){     var readbooks = getobjects("readbooks");     var bookstoread = getobjects("bookstoread");     var book = bookstoread[dit];      // push new item existing list     readbooks.push(book);      // store new list     saveobjects(readbooks, "readbooks");      //delete old list     deleteme(dit, "bookstoread");      //reload page     window.location.reload(); }  function deleteme(dit, listname) {     // fetch existing objects     var objects = getobjects(listname);      // delete given object list     objects.splice(dit, 1);      // save list     saveobjects(objects, listname);      //reload page     window.location.reload(); }  function loadpage() {     // fetch existing objects     var bookstoread = getobjects("bookstoread");     var readbooks = getobjects("readbooks");      // clear lists     $('#bookstoread').find('li').remove();     $('#readbooks').find('li').remove();      // add every object 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(); });  

i've think got error, in $.each loop try removing your

bookstoread.index // , readbooks.index 

for just

index 

so, $.each loops that:

 $.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(' + index + ')" data-transition="none">ddddd</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(' + index + ', ' + listname + ')" data-transition="none"></a></li>');  }); 

your trying property "index" of object bookstoread while need index param property of $.each loop function, correct index of book want move. don't error in console because bookstoread.index === undefined , don't generates exception, so, index become ..."onclick="read(undefined)"... hope i've helped, luck project!