Why does the popup model stops working when I add order for API

Question

Hey I need some help I'm trying to make an popup model that pops when the page load.... Now I've succeeded to do it in clean html page but in my project I have some import of jQuery for API spreadsheets and it stops to work.

Here is my model

<div class="modal" id="exampleModalCenter" tabindex="-1" role="dialog"
            aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #a3de83;">
                        <h3 class="modal-title" id="exampleModalLongTitle">Vous êtes propriétaire ?</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" style="background-color: #a3de83;">
                        Remplacez votre système de chauffage ou isolez vos murs extérieurs en bénéficiant d’Aides de
                        l’Etat
                        Économisez jusqu’à 70% sur vos factures de chauffage.
                        <br />
                        <br />
                        GRÂCE AUX NOUVELLES AIDES DE L'ÉTAT EN 2020/2021
                        <br />
                        * Réaliser des économies
                        <br />
                        * Gagner en confort dans votre logement
                        <br />
                        * Faire gagner de la valeur à votre domicile
                        <br />
                        * Avoir un meilleur DPE (diagnostic de performance énergétique)
                    </div>
                    <div class="modal-footer" style="background-color: #a3de83;">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermé</button>
                    </div>
                </div>
            </div>
        </div>

Here is my script:

<script >
$(document).ready(function () {
    setTimeout(function () {
        // Show the Modal on load
        $("#exampleModalCenter").modal("show");
    }, 500)
});

There is my order:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<script src="JS_Main.js"></script>

And this specific one make the treble and when I remove him its work fine but the API don't works

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
        crossorigin="anonymous"></script>

And this is the Error that I get

error that I get