I have a login and register modal and these modals share one same attribute, so I wanted to create an onclick function for each of the modals' submit buttons to trigger errors in respective modals. I tried this code to see if the button can trigger for the modals to show,

function loginModal(){
            $('#modal-register').modal('show');      
   }
    
   document.getElementById("modal-login-btn").addEventListener("click", loginModal);

and it does, however it only works before the page reload, as when i click the submit button, the page will reload. I want the modal to show after the page reload. I also tried this but it doesn't work.

$(document).ready(function(){
        function loginModal(){
            if (count($errors) > 0){
                $(document).ready(function(){
                    $('#modal-login').modal('show');
                });
            }        
        }
    });
    
    document.getElementById("modal-login-btn").addEventListener("click", loginModal);

Does anyone have any idea how to make the function run after page reload?