How to destroy the modal of Boostrap v4?

I have a modal problem with the boostrap, which is as follows:

  

The modal is opened by clicking a button, once the modal is closed the   console shows that it has opened once. If I click the button again   to open this same modal, the console shows that it has opened more than 3   times in a row, and it appears once.

Why does this happen?

I need to destroy the modal as soon as I close, so I'm using the following:

$('#').modal('hide');

I have tried to use this method below, but it destroys the modal, but the background "gray opacity" of the modal is still and I do not know why this happens.

$('#').modal('dispose');

Example of the modal I use:

<section id="CreateNewFloorModalSection">
        <div class="modal fade pb-5 mb-5" id="CreateNewFloorModal" tabindex="-1" role="dialog" aria-labelledby="CreateNewFloorModal" aria-hidden="true" data-backdrop="static" data-keyboard="false" data-focus="true">
            <div class="modal-dialog modal-dialog-centered" role="document"> <!-- start {modal-dialog} -->
                <div class="modal-content"> <!-- start {modal-content} -->
                    <div class="modal-header"> <!-- start {modal-header} -->
                        <h5 class="modal-title">
                            <i class="fab fa-accusoft fa-lg ml-2 mr-2"></i>
                            Create New Floor
                        </h5>
                    </div> <!-- end {modal-header} -->

                    <div class="modal-body mx-auto pt-3 mb-3"> <!-- start {modal-body} -->
                        <form id="CreateNewFloorForm" action=""> <!-- start {form} -->
                            <div class="form-group row mt-2 mb-4">
                                <div class="col-12">
                                    <div class="input-group input-group-lg">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text bg-primary text-white"><i class="fas fa-key"></i></span>
                                        </div>
                                        <input id="FloorID" class="form-control controls" type="text" placeholder="Enter the Floor ID" aria-label="FloorID" aria-describedby="ID do Floor para inserir no DBS">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row mb-3"> <!-- start {form-group} {map floor} -->
                                <div class="col-12">
                                    <div class="input-group input-group-lg">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-map"></i></span>
                                        </div>
                                        <input id="NewMapFloor" class="form-control" type="text" disabled required>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <small id="NewMapFloorHelp" class="form-text text-muted ml-1">The Map ID is Generated Automatically.</small>
                                </div>
                            </div> <!-- end {form-group} {map floor} -->

                            <div class="form-group row mb-3"> <!-- start {form-group} {date create} -->
                                <div class="col-12">
                                    <div class="input-group input-group-lg">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-calendar ml-1 mr-1"></i></span>
                                        </div>
                                        <input id="NewFloorDateCreate" class="form-control" type="text" disabled required>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <small id="NewFloorDateCreateHelp" class="form-text text-muted ml-1">The Date Create is Generated Automatically </small>
                                </div>
                            </div> <!-- end {form-group} {date create} -->
                        </form> <!-- end {form} -->
                        <div class="modal-footer"> <!-- start {modal-footer} -->
                            <button id="RejectSaveNewFloor" class="btn btn-danger" type="button" data-toggle="modal" data-target="#CancelModal" data-dismiss="modal" aria-label="Close">Discard</button>
                            <button id="SaveNewFloor" class="btn btn-primary" type="button">Save New Floor</button>
                        </div> <!-- end {modal-footer} -->
                    </div> <!-- end {modal-content} -->
                </div> <!-- end {modal-dialog} -->
            </div> <!-- end {modal} -->
</section>