Hidding Modal with jquery

Question

This is my jquery code, i've to hide modal using jquery, i tried using 'hide' but it doesn't work!

  $(document).ready(function () {

    $('#modalButtonLogin').click(function (e) {
        e.preventDefault();
        $('#loginModal').modal()

    });
    $('#reserveButtonModal').click(function (e) {
        e.preventDefault();
        $('#modelId').modal()
    });

    $('#dismiss').click(function () {
        $('#modelId').modal('hide');
    });
   });

I'm using the same ids but i don't know how to do it the id's are 'dismiss' i have a problem, cause using data-dismiss it works but i need to know how it works in jquery

    <!-- Modal Task's -->
    <div class="modal fade" id="modelId" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Reserve Table</h5>
                    <button type="button" class="close" aria-label="Close" id="dismiss">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
      

                    <div class="row p-2">
                        <div class="col-sm col-lg-2">
                            <h5>Section</h5>
                        </div>
                        <div class="btn-group align-self-center" data-toggle="buttons">
                            <a href="" class="btn btn-success">Non-Smoking</a>
                            <a href="" class="btn btn-danger">Smoking</a>
                        </div>
                    </div>

                    <div class=" row p-2">
                        <div class="col-sm col-lg-2">
                            <h5 class="">Date and Time </h5>
                        </div>
                        <div class="mr-3 pb-2 ">
                            <input type="date" name="dateinfo" id="" placeholder="Date">
                        </div>
                        <div class="mr-3 pl-4">
                            <input type="time" name="" id="" placeholder="Time">
                        </div>
                    </div>
                    <div class=" row offset-lg-2 offset-1">
                        <button type="submit" class="btn btn-primary"> Reserve </button>
                        <button type="button" class="btn btn-secondary ml-2" id="dismiss">Close</button>                    
                    </div>
                </div>
            </div>
        </div>

Answer 1

You can try to replace $('#modelId').modal('hide'); by $('#modalId').modal('toggle');