Javascript/jQuery Syntax Issue

Javascript/jQuery Syntax Issue

Hi, sorry if this is the wrong forum for this question, but I'm new to this. This is the issue I'm having.  The code below works just fine, when you hover over the div with the corresponding id, it fires a click event on a different class:

<body>

<div id="site1">
             <p><a href="" >Website 1</a></p>
</div>

<script type="text/javascript">
            $("#site1").hover(function() {
                    $(".centered-btns1_s1").click();
            });
</script>

</body>

The problem is that this code is repeated 6 times on my page (id="site1", "site2", "site3", etc. and ".centered-btns1_s1", ".centered-btns1_s2", ".centered-btns1_s3", etc.) and I have multiple pages like it.  What I'm trying to do is convert it into one function located in the "head" of the document that I can pass the individual parameter back to...something like this:

<head>

<script type="text/javascript">
       
            $(function hoverClick(navNumber) {
           
                $("navNumber").click();
           
            });
       
</script>

</head>

<body>

<div>
            <p><a href="" onmouseover="hoverClick(".centered-btns1_s1")">Website 1</a></p>
</div>

</body>

I feel like I should be pretty close with this, but it doesn't work.  When it comes to Javascript/jQuery my syntax sucks so I'm hoping that is what is going on...perhaps a single quote where there should be a double quote or something like that.  In any case, PLEASE HELP!!

Thank you in advance!