"Cannot read property 'addEventListener' of null" for loaded in elements

Question

I'm loading in a form element using jQuery from another HTML file and using Firebase for account management. I've read that this issue occurs because the script can't find the element it's referring to, but I think this might be because the element doesn't exist until another script actually loads it in. I've tried moving the load code above the event listener code but it hasn't worked. How do I fix this?

Main HTML snippet

        <!-- Footer -->
        <div id="footer"></div>

        <!-- Sign in/out modal -->
        <div class="modal fade" tabindex="-1" role="dialog" id="signInModal"></div>
        <div class="modal fade" tabindex="-1" role="dialog" id="signUpModal"></div>

        <!-- Optional JavaScript -->
        <!-- Keep at bottom of code -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="..." crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="..." crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="..." crossorigin="anonymous"></script>

        <!-- My scripts -->
        <script src="scripts/defaults.js"></script>
        <script src="https://www.gstatic.com/firebasejs/4.13.0/firebase.js"></script>
        <script src="scripts/firebase.js"></script>
    </body>
</html>

Load elements code (defaults.js)

$(function(){
    $('#header').load('defaults/header.html');
    $('#footer').load('defaults/footer.html');
    $('#signInModal').load('defaults/signInModal.html');
});

Firebase code (firebase.js including event listener)

(function () {
    // Initialize Firebase
    var config = {
        apiKey: "...",
        authDomain: "app-1234.firebaseapp.com",
        databaseURL: "https://app-1234.firebaseio.com",
        projectId: "app-1234",
        storageBucket: "",
        messagingSenderId: "123456789"
    };
    firebase.initializeApp(config);


    // Get elements
    const signInEmail = document.getElementById('signInEmail');
    const signInPassword = document.getElementById('signInPassword');

    const signUpEmail = document.getElementById('signUpEmail');
    const signUpPassword = document.getElementById('signUpPassword');

    const btnSignIn = document.getElementById('btnSignIn');
    const btnSignUp = document.getElementById('btnSignUp');
    const btnSignInUp = document.getElementById('btnSignInUp');
    const btnMyAccount = document.getElementById('btnMyAccount')


    // Add sign in event
    btnSignIn.addEventListener('click', e => {
        // Get email and pass
        const email = signInEmail.value;
        const pass = signInPassword.value;
        const auth = firebase.auth();

        // Sign in
        const promise = auth.signInWithEmailAndPassword(email, pass);
        promise.catch(e => console.log(e.message));
    });
}());