How to make multiple modal windows?

Question

JavaScript

There is such a design

<script>
    $(document).ready(function(){
        PopUpHide();
    });

    function PopUpShow(){
        $("#popup").show();
    }

    function PopUpHide(){
        $("#popup").hide();
    }
</script>

And such

<div id="popup" name="Users">
</div>

<div id="popup" name="Groups">
</div>

<a class="del" href="javascript:PopUpHide()" onclick="fync();" title="Close users">X</a>	
  <a class="del" href="javascript:PopUpHide()" onclick="fync();" title="Close groups">X</a>

And 2 buttons respectively
How to make multiple popups?
I think everything is very simple and when calling the function you need to pass an identifier, but I don’t know how to do it.

Answer 1

$(document).ready(function(){
        PopUpHide('popup1');
    });

    function PopUpShow(id){
        $(`#${id}`).show();
    }

    function PopUpHide(id){
        $(`#${id}`).hide();
    }

<div id="popup1" name="Users">
</div>

<div id="popup2" name="Groups">
</div>

Answer 2

Modals should open by class. You can't have more than one element with the same id! This is an id and must be unique. This html will not be valid.
And in the button, you can pass a parameter by which it will determine which window it should open. For example, in the data attribute.