Untitled

<html>
<head>
    <title>JQuery</title>
    <style type="text/css">
        * {
        padding: 2px;
        }
        .container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 100vh;
        }
        .form {
        padding: 1rem;
        background-color: bisque;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
    crossorigin="anonymous"
    ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
</head>
<body>
    <div class="container">
        <button id="toggle_form">toggle form</button>
        <div id="form" class="form" style="visibility: hidden;">
            <h1>List Buku</h1>
            <div>
                <label>Judul Buku : </label>
                <input type="text" id="title" name="title" class="form-control" />
            </div>
            <div>
                <label>Buku :</label>
                <select id="list">
                <option value="">list</option>
                </select>
            </div>
            <input class="" type="button" value="Add New Book" id="add_book" />
        </div>
    </div>
    <script>
    $(document).ready(function () {
        // var form = document.getElementById('form');
        $("#toggle_form").click(function () {
            if ($("#form").css('visibility') == 'hidden') {
                $('#form').css('visibility', 'visible');
            }
            else if ($("#form").css('visibility') == 'visible') {
                $('#form').css('visibility', 'hidden');
            }
        });

        $("#add_book").click(function () {
            var inserted = $("#title").val();

            if (inserted == "") {
                return;
            } else {
                $("#list").append(new Option(inserted, inserted));
            }
        });
    });
    </script>
</body>
</html>