How to use javascript to display modal pop up for login and sign up on different web pages of same project or website

Question

I have used modal pop up for signup and login in index.html and I have copy pasted the same code of login and signup in cupcakes.html. I have such 5 html pages and I have done some javascript over there. But pop up opens only in index.html not for other pages. Please help me to sort out this.

index.html:

<li><button id="signup-btn" class="signup-btn">SignUp</button></li>
<div id="signup" class="signup">
    <div class="modal-content3"> 
        <form action="" name="signupform" method="post" onsubmit="validateSignupForm()">
            <span id="close1">&times;</span><br>
            <input type="text" placeholder="Email" name="email" title="Enter a vaild Email Address" required pattern="\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})"><br>
            <input type="text" placeholder="Username" name="username1" required><br>
            <input type="password" placeholder="Password" name="password1" title="[Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters]" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"><br>
            <input type="password" placeholder="Confirm Password" name="cpassword" required><br>
            <button type="submit">Sign Up</button>
            <label class="checkbox"><input type="checkbox" checked="checked" name="remember1">Remember me</label><br>
        </form>
    </div>
</div>
<li><button id="login-btn" class="login-btn">Login</button></li>
<div id="login" class="login">
    <div class="modal-content2">
        <form action="" name="loginform" method="post" onsubmit="validateLoginForm()">
            <span id="close">&times;</span><br>
            <input type="text" placeholder="Username" name="username" required><br>
            <input type="password" placeholder="Password" name="password" title="[Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters]" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"><br>
            <button type="submit">Login</button>
            <label class="checkbox"><input type="checkbox" checked="checked" name="remember">Remember me</label><br>
            <a href="#" class="fgtpass">Forgot Password</a>
        </form>
    </div>
</div>

script.js:

document.getElementById('login-btn').addEventListener("click",function(){
    let popup= document.querySelector('.login').style.display="block";
});
document.getElementById('close').addEventListener("click",function(){
    let popdown = document.querySelector('.login').style.display="none";
});

document.getElementById('signup-btn').addEventListener("click",function(){
    let popup= document.querySelector('.signup').style.display="block";
});

document.getElementById('close1').addEventListener("click",function(){
    let popdown=document.querySelector('.signup').style.display="none";
});

var login = document.getElementById('login');
window.onclick = function(eventl){
    if(eventl.target==login){
        login.style.display='none';
    }
};

var signup = document.getElementById('signup');
window.onclick = function(events){
    if(events.target==signup){
        signup.style.display='none';
    }
};