How to create multiple javascript buttons for different links?

I’m working on a graphic design portfolio website, in which I want to showcase my previous projects, that when it’s clicked an overlay page will pop up with more detail. I managed to do it for three of them (it’s the same overlay page, didn’t need to change anything), but when I’m trying to create a different overlay page using the same CSS style of the transparent background, it just keeps taking me to the same page.

I added another javascript function and changed it’s id, then linking the button to it, but it still takes me to the ‘TEAM GB OVERLAY’.

HTML of TEAM GB overlay

<!-------TEAM GB OVERLAY----->
<div id="overlay" onclick="gb_off()">
        <div class="overlay_img">
            <img src="images/gb_men.png" width= "100%">
            <br><br><br><br><br><br><img src="images/post_worlds_men.png" width= "100%">
            <br><br><br><br><br><br><img src="images/world_games.png" width= "100%">
            <br><br><br><br><br><br><img src="images/Juniors_full.png" width= "100%">
            <br><br><br><br><br><br><img src="images/juniors.png" width= "100%">
            <br><br><br><br><br><br><img src="images/ALL_ENGLAND.png" width= "100%">
            <br><br><br><br><br><br><img src="images/welsh_champs.png" width= "100%">
            <br><br><br><br><br><br><img src="images/northern_unis.png" width= "100%">
            <br><br><br><br><br><br><img src="images/sm_uni_champs.png" width= "100%">
        </div>  
    <div class="overlay_title">
        PROMOTIONAL SOCIAL MEDIA POSTERS:
            <div class="overlay_title_thin">
        BRITISH POWERLIFTING FEDERATION & AFFILIATES
    </div>
<div class="overlay_text">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
    when an unknown printer took a galley of type and scrambled it to make a type
    specimen book. It has survived not only five centuries, but also the leap 
    into electronic typesetting, remaining essentially unchanged. It was popularised    
    in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
    and more recently with desktop publishing software like Aldus PageMaker including
    versions of Lorem Ipsum.
</div>  
    </div>
        <div class="overlaping_img">
            <img src="images/gb_women.png" width= "100%">
            <br><br><br><br><br><br><img src="images/post_worlds_women.png" width= "100%">
            </div>      
</div>

HTML of ARNOLDS CHEQUES overlay that I’m trying to make

<!-------ARNOLDS CHEQUES OVERLAY----->
<div id="overlay" onclick="arnolds_off()">
    CONTENT WILL GO HERE
</div>

HTML of the clickable images

            <li><a id="myLink" onclick="gb_on();return false;"><img src="images/gb_men.png" width= "100%"></a></li>

            <li><a id="arnolds" onclick="arnolds_on();return false;"><img src="images/Cheques.jpg" width= "100%"></a></li>

JAVASCRIPT

  <script>
 <!--------TEAM GB POSTERS------> 
function gb_on() {
  document.getElementById("overlay").style.display = "block";
}

function gb_off() {
  document.getElementById("overlay").style.display = "none";
}
 <!--------ARNOLDS------> 
function arnolds_on() {
  document.getElementById("overlay").style.display = "block";
}

function arnolds_off() {
  document.getElementById("overlay").style.display = "none";
}
</script>

Transparent background CSS that I’m trying to use for all of them

#overlay {
  position: fixed;
  background-size: 100% 100%;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.8);
  z-index: 9999;
  cursor: pointer;
  overflow: scroll;
}