jQuery variable i <a>

Hej udviklere!

Jeg har et lille projekt, hvor jeg trækker 50 rows ud fra en SQL database. Hver row bliver vist som en <div> hos de besøgende, hvor hver div automatisk får tildelt et id.

 $box_id = 1;
         
         while($data = mysql_fetch_array($foresp)) {
             echo ("<div class='box'></div>");
             $box_id += 1;    
         }

Jeg har sammentidig et jQuery script, som gør, at når musen føres hen over en af de her divs, så vises en anden div oven på.

Måden det er gjort på nu er:

 $("#1").hover(function(){
         focusedDiv = 1;
         $.fn.displayHover();
     });
     
     $("#2").hover(function(){
         focusedDiv = 2;
         $.fn.displayHover();
     });
     
     $("#3").hover(function(){
         focusedDiv = 3;
         $.fn.displayHover();
     });
 ... og så videre op til 50!

Men for at optimere koden - har i så en idé til, hvordan jeg kan undvære de ekstremt mange linjer kode, som egentlig gør det samme - ændrer min "focusedDiv" variabel til den div, som brugeren nu engang hover hen over?

Tænker, at man kunne lave et link <a> rundt omkring og give den "onHover: focusedDiv = $box_id"

Lidt ala sådan her:

 $box_id = 1;
         
         while($data = mysql_fetch_array($foresp)) {
             echo ("<div class='box'><a href='#' onHover='$focusedDiv = ". $box_id ."'></a></div>");
             $box_id += 1;
             
         }

Håber det gav lidt mening - har lidt problemer med at formulere det korrekt

God aften, og happy coding!