add remove functionality to my booklist pg

booklist.js

@@ -20,18 +20,30 @@ const displayUsingApi = false;
     const body = $('#book-list')
 
     Object.keys(list).forEach((bookId) => {
-      console.log(bookId)
+      body.append(makeListItem(bookId, list[bookId]))
-      body.append(makeListItem(list[bookId]))
     })
   }
 
-  function makeListItem(book) {
+  $('.remove-from-booklist').on('click', (event) => {
+    const target = $(event.target)
+    const bookId = target.parent().attr('id')
+    console.log(bookId)
+    removeBook(bookId)
+    location.reload()
+  })
+
+  function removeBook (id) {
+    const newlist = JSON.parse(localStorage.getItem('booklist'))
+    delete newlist[id]
+    localStorage.setItem('booklist', JSON.stringify(newlist))
+  }
+
+  function makeListItem (id, book) {
     const a = `<a href="${book.url}"><h3>${book.title}</h3></a>`
-    const li = `<li><div class="list-item"><img src="${book.imgSrc}"/>${a}<span>Author: ${book.author}</span><div><div class="social-button booklist">
+    const li = `<li><div id="${id}" class="list-item"><img src="${book.imgSrc}"/>${a}<span>Author: ${book.author}</span>
-        <button title="Add book to My Book List" id="add-to-booklist"
+        <button title="Remove From Booklist" class="remove-from-booklist"
-            style="background-color: cornflowerblue;">+</button>
+            style="background-color: indianred;">-</button>
     </div></li>`
-    console.log(li)
     return li
   }
 })(jQuery) // eslint-disable-line