Toggle Button doesn't seem to be working?

Question

Hi I'm sure I've written this code properly as I followed in the tutorial. I want the #booking-button to be clicked which should 'toggle' the #btn element to disappear. Essentially one is a box which contains information about a car and when user clicks 'Click here to Book' it should open the form. But for some reason it doesn't. I'm thinking it may have something to do with the CSS but I'm not sure.

Any tips on this?

          <div class="form-wrapper">
                <form action="#">
                    <label for="name">Name*</label>
                    <input placeholder="Your Name" class="full" type="text"id="name">
                    <br>
                    <label for="email">Email</label>
                    <input placeholder="Your Email" class="full" type="text"id="name">
                    <br>
                    <label for="hire-start-date">Hire Start Date</label>
                    <input type="date" id="depart">
                    <br>
                    <label for="hire-end-date">Hire End Date</label>
                    <input type="date" id="depart">
                    <br>
               
                    <button class="book-now">Book Now</button>
                </form>
            </div>

            <div class="car-info" id="btn">  
                <button id="booking-button">Click Here to Book</button>

            </div>
        </div>

$(document).ready(function() {

    $('#booking-button').on('click', () => 
    { $('#btn').toggle(); });

});

Answer 1

Now the form appears when user clicks Click Here to Book , while this button disappears.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-wrapper"> <form action="#" id="car-info" style="display: none;"> <label for="name">Name*</label> <input placeholder="Your Name" class="full" type="text"id="name"> <br> <label for="email">Email</label> <input placeholder="Your Email" class="full" type="text"id="name"> <br> <label for="hire-start-date">Hire Start Date</label> <input type="date" id="depart"> <br> <label for="hire-end-date">Hire End Date</label> <input type="date" id="depart"> <br> <button class="book-now">Book Now</button> </form> </div> <div id="btn"> <button id="booking-button">Click Here to Book</button> </div> <script> $(document).ready(function() { $('#booking-button').on('click', () => { $('#car-info').toggle(); $('#btn').toggle(); }); }); </script>