I can't seem to make toggle switch work on my library app

I have been trying to finish my Library Application. I have forgot to add a read button. Now I am trying to add a switch toggle. I have added it to the popUp form as well as the row.innerHTML in the DOM.

I have set the value to "yes", but when I am toggling it on the popUp form it does not actually work. When I submit the form as "mark as read" checked it still adds it as "unchecked". How can I go on about fixing this error?

// ############ Selectors ############

//Add a book form pop up
const newBtn = document.querySelector('#newBtn');
//add the new book to the library
const addBtn = document.querySelector('#addBtn');
// close span
const closeSpan = document.querySelector('.close');
// display the new book
const display = document.querySelector('.display-lib');
//############ Listeners ############

// pop up the modal
newBtn.addEventListener('click', function () {
    document.getElementById("popUp").style.display = "block";
})

// closes the form
closeSpan.addEventListener('click', function () {
    popUp.style.display = "none";
})

// closes the form when you click anywhere on the window
window.addEventListener('click', function (e) {
    if (e.target == popUp) {
        popUp.style.display = "none";
    }
})



class Book {
    constructor(title, author, pages, notes, read) {
        this.title = title;
        this.author = author;
        this.pages = pages;
        this.notes = notes;
        this.read = read;

    }
}

let myLibrary = [];

class UI {
    displayBook() {
        //storing the books

        for (let i = 0; i < myLibrary.length; i++) {
            addBookToLibrary(myLibrary[i]);
        }
    }

    addBookToLibrary(book) {
        const shelf = document.querySelector('#book-list');
        const row = document.createElement('th');


        row.innerHTML = `
        <div class="book"> 
            <div class="title">Title: ${book.title}</div>
                 <p class="author">Author: ${book.author}</p>
                 <p class="pages">Pages: ${book.pages}</p>
                 <p class="pages">Notes: ${book.notes}</p>
            <span class="read_toggle_label">Mark as read:</span>
         <label class="switch">
            <input type="checkbox" value="yes" id='read' name='read'>
            <span class="slider round"></span>
         </label>
             <a href="#" class="delete"></a>
        </div>
            `;

    if (book.read) {
        row.getElementById('read').checked = true;
    }

        //delete the book
        const dlt = row.querySelector('.delete');
        dlt.addEventListener('click', function (e) {
            //first get the UI 
            const ui = new UI();
            ui.deleteBook(e.target);
            ui.showAlertDelete('book removed', 'success');
        })


        shelf.appendChild(row);
    }



    clearFields() {
        document.querySelector('#title').value = '';
        document.querySelector('#author').value = '';
        document.querySelector('#pages').value = '';
        document.querySelector('#notes').value = '';
    }
    deleteBook(target) {
        if (target.className === 'delete') {
            target.parentElement.remove();
        }

    }
    // the alert prototoype function
    showAlert(message, className) {
        const div = document.createElement('div');
        div.className = `alert ${className}`;
        div.appendChild(document.createTextNode(message));
        const form = document.querySelector('#form');
        form.appendChild(div);
        setTimeout(function () {
            document.querySelector('.alert').remove();
        }, 3000);

    }
    showAlertDelete(message, className) {
        const div = document.createElement('div');
        div.className = `alert ${className}`;
        div.appendChild(document.createTextNode(message));
        const form = document.querySelector('.content');
        form.appendChild(div);
        setTimeout(function () {
            document.querySelector('.alert').remove();
        }, 3000);

    }

}


addBtn.addEventListener('click', (e) => {
    const title = document.querySelector('#title').value,
        author = document.querySelector('#author').value,
        pages = document.querySelector('#pages').value,
        notes = document.querySelector('#notes').value,
        read = document.querySelector('#read').checked;


    const ui = new UI();
    if (title === '' || author === '' || pages === '' || notes === '') {
        ui.showAlert('Fill in the all the fields', 'error');
    } else {
        const newBook = new Book(title, author, pages, notes, read);
        ui.addBookToLibrary(newBook);
        myLibrary.push(newBook);
        //function to clear input after submitted
        ui.clearFields();
    }

    e.preventDefault();
});

h1 {
    display: flex;
    justify-content: center;

}

.title {
    display: flex;
    justify-content: center;
    padding-top: 4rem;

}

p {
    display: flex;
    justify-content: center;
    padding-top: 1rem;

}

body {
    background-color: #41b3a3;
    height: 100vh;
}

.success,
.error {
    color: white;
    padding: 5px;
}

.error {
    background: rgb(190, 0, 0);
}

.success {
    background: green;
    margin: auto;
}


/* Modal popup box  https://www.w3schools.com/howto/howto_css_modals.asp */

/* The Modal (background) */
input#title {
    height: 30px;
    width: 200px;
    font-size: 20px;

}

input#author {
    height: 30px;
    width: 200px;
    font-size: 20px;

}

input#pages {
    height: 30px;
    width: 200px;
    font-size: 20px;
    margin-bottom: 20px;
}

input[type=checkbox] {

    transform: scale(2);
}

#popUp {

    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
    font-size: 30px;

}

/* Modal Content/Box */
#form {
    background-color: #fefefe;
    margin: 15% auto;
    /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 20%;
    /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


.mark_as_read {
    display: inline-block;
    vertical-align: middle;
    justify-content: center;

}


/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    justify-content: center;
    margin: auto;
    width: 60px;
    height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {

    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #41b3a3;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

#switch_container {
    display: flex;
    justify-content: center;
}

/* Styles for the added book */
.book {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    margin: 20px;
    background-color: #56c49e;
}

.title {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 20px;
}

.author {
    font-size: 30px;
    margin-bottom: 20px;
}

.pages {
    font-size: 25px;
    margin-bottom: 20px;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Library</title>
</head>

<body>

  <div class="content">

    <h1 class="title">A Book Library</h1>
    <p>A library project where you can store your books, coded for the Odin Project</p>




    <div id="addBtn_container" class="has-text-centered">
      <a id="newBtn" class="button is-primary is-inverted">Add a New Book</a>
    </div>

    <div id="popUp">
      <form id='form'>
        <span class="close">&times;</span>
        <ledgend>New Book</ledgend>
        <div id='textInput'>
          <p><input type='text' id='title' name='title' placeholder='Title'></p>
          <p><input type='text' id='author' name='author' placeholder='Author'></p>
          <p><input type='text' id='pages' name='pages' placeholder='Pages'></p>
        </div>
        <div class="field">
          <label class="label">Additional Notes</label>
          <div class="control">
            <textarea id='notes' class="textarea" placeholder="Notes"></textarea>
          </div>
        </div>
        <div id="switch_container">
          <span class="mark_as_read">Mark as read: </span>
          <label class="switch">
            <input type="checkbox" value="yes" id='read' name='read'>
            <span class="slider round"></span>
          </label>
          <button class="button  is-success  is-rounded is-pulled-right" type='submit' form='form'
            id='addBtn'>Add</button>
        </div>

      </form>
    </div>
  </div>
  <h1>MY BOOKS</h1>
  <div class="display-lib">
    <table>
      <tbody id="book-list">

      </tbody>
    </table>
  </div>

  </tbody>

  <script src="app.js"></script>
</body>

</html>

from Recent Questions - Stack Overflow https://ift.tt/3nlJpXB
https://ift.tt/eA8V8J