JQuery Toggle Effect

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery Booklist</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
    <div class="d-flex flex-column min-vh-100 justify-content-center align-items-center">
        <form>
            <div class="form-group">
              <label for="exampleInputBookName">New Book Name</label>
              <input type="text" class="form-control" id="txtNewBook" aria-describedby="emailHelp" placeholder="Enter book name">
              <small id="bookHelp" class="form-text text-muted">Enter book name</small>
            </div>
            <br />
            <div class="form-group">
              <label for="exampleSelectBook">Select Book</label>
              <select id="DDLbook" class="form-control">
                  <option value="">Select Book</option>
              </select>
              <!-- <input type="text" class="form-control" id="exampleSelectBook" placeholder="Select book"> -->
            </div>
            <br />
            <button type="button" id="btnAdd" class="btn btn-primary">Add Book</button>
            <script>
                // give id to all controls
                // now define function for our task.
                // we have to do something on click of the button. so...
                // $ is alias of JQuery. you can write jQuery in place of $
                // # is used to select the control by its id
                // .click is the function which will invoke when the button is clicked.
                // function() it's the place where we have to tell jQuery what to do on click of the button
                $('#btnAdd').click(function() {
                    var newbook = $('#txtNewBook').val(); // var keyword is used to define a variable
                    // val() function is used to take control's value.
                    // in above line we are taking value of textbox into a variable.

                    $('#DDLbook').append(new Option(newbook, newbook)); // in this line we are adding something to DDL
                    // append() function is used to add element to the control
                    // new Option is used because in Drop down we have to give value and text for each option
                })
            </script>
          </form>


        <!-- New Book Name: <input type="text" id="txtNewBook"/>
            <br />
            All Books:
            <select id="DDLbook">
                <option value="">Select</option>
            </select>
            <br />
            <input type="button" id="btnAdd" value="ADD BOOK" />
            <script>
                // give id to all controls
                // now define function for our task.
                // we have to do something on click of the button. so...
                // $ is alias of JQuery. you can write jQuery in place of $
                // # is used to select the control by its id
                // .click is the function which will invoke when the button is clicked.
                // function() it's the place where we have to tell jQuery what to do on click of the button
                $('#btnAdd').click(function() {
                    var newbook = $('#txtNewBook').val(); // var keyword is used to define a variable
                    // val() function is used to take control's value.
                    // in above line we are taking value of textbox into a variable.

                    $('#DDLbook').append(new Option(newbook, newbook)); // in this line we are adding something to DDL
                    // append() function is used to add element to the control
                    // new Option is used because in Drop down we have to give value and text for each option
                })
            </script> -->
    </div>
</body>
</html>